Buttons · FWT Dokumentation

Komponenten / Buttons

Buttons in FWT

Buttons lösen Aktionen aus. Sie müssen klar erkennbar, gut bedienbar und in ihrer Bedeutung unterscheidbar sein.

Ein guter Button sagt nicht nur „hier klicken“, sondern macht deutlich, was nach dem Klick passiert.

Eine Seite sollte nicht zu viele dominante Hauptbuttons gleichzeitig zeigen.

Gefährliche Aktionen wie Löschen, Zurücksetzen oder Deaktivieren brauchen eine eigene optische Bedeutung.

Buttons müssen mit Maus, Tastatur und Touch gut nutzbar sein.

Varianten

Standardbuttons

Die Standardvarianten decken die wichtigsten Bedeutungen ab: Hauptaktion, Nebenaktion, neutrale Aktion, Erfolg, Warnung und Gefahr.

Live-Beispiel

HTML-Code anzeigen

<div class="fwt-btn-group">
    <button class="fwt-btn fwt-btn-primary" type="button">Primär</button>
    <button class="fwt-btn fwt-btn-secondary" type="button">Sekundär</button>
    <button class="fwt-btn fwt-btn-light" type="button">Hell</button>
    <button class="fwt-btn fwt-btn-success" type="button">Erfolg</button>
    <button class="fwt-btn fwt-btn-warning" type="button">Warnung</button>
    <button class="fwt-btn fwt-btn-danger" type="button">Gefahr</button>
</div>

Für die wichtigste Aktion auf einer Seite wird meist fwt-btn-primary verwendet.

Button-Gruppen

Button-Gruppen fassen zusammengehörige Aktionen sichtbar zusammen. Sie eignen sich für Speichern, Vorschau, Abbrechen oder ähnliche Aktionen.

Live-Beispiel

HTML-Code anzeigen

<div class="fwt-btn-group">
    <button class="fwt-btn fwt-btn-primary" type="button">Speichern</button>
    <button class="fwt-btn fwt-btn-secondary" type="button">Vorschau</button>
    <button class="fwt-btn fwt-btn-light" type="button">Abbrechen</button>
</div>

Verbunden

Verbundene Button-Gruppen

Verbundene Gruppen eignen sich für Umschalter, Filter oder Ansichtswechsel. Die Buttons wirken als gemeinsame Einheit.

Live-Beispiel

HTML-Code anzeigen

<div class="fwt-btn-group-connected" role="group" aria-label="Ansicht wählen">
    <button class="fwt-btn fwt-btn-light" type="button">Liste</button>
    <button class="fwt-btn fwt-btn-primary" type="button">Karten</button>
    <button class="fwt-btn fwt-btn-light" type="button">Tabelle</button>
</div>

Bei verbundenen Gruppen sollte mit role="group" und aria-label erklärt werden, wozu die Gruppe dient.

Toolbar

Button-Toolbars

Toolbars bündeln mehrere Button-Gruppen. Sie sind nützlich für Adminbereiche, Tabellenaktionen, Editor-Werkzeuge oder Filterleisten.

Live-Beispiel

HTML-Code anzeigen

<div class="fwt-btn-toolbar fwt-btn-toolbar-between">
    <div class="fwt-btn-group">
        <button class="fwt-btn fwt-btn-primary" type="button">Neu</button>
        <button class="fwt-btn fwt-btn-secondary" type="button">Bearbeiten</button>
    </div>

    <div class="fwt-btn-group">
        <button class="fwt-btn fwt-btn-light" type="button">Filtern</button>
        <button class="fwt-btn fwt-btn-light" type="button">Export</button>
    </div>
</div>

Actionbar

Eine Actionbar trennt Hauptaktionen und Nebenaktionen klar voneinander. Das ist besonders gut für Dashboards, Listen und Verwaltungsseiten.

Live-Beispiel

HTML-Code anzeigen

<div class="fwt-actionbar">
    <div class="fwt-actionbar-main">
        <button class="fwt-btn fwt-btn-primary" type="button">Artikel anlegen</button>
        <button class="fwt-btn fwt-btn-secondary" type="button">Import starten</button>
    </div>

    <div class="fwt-actionbar-secondary">
        <button class="fwt-btn fwt-btn-light" type="button">Hilfe</button>
        <button class="fwt-btn fwt-btn-danger" type="button">Zurücksetzen</button>
    </div>
</div>

Vertikal

Vertikale Button-Gruppen

Vertikale Button-Gruppen eignen sich für Schrittfolgen, mobile Bereiche oder schmale Seitenleisten.

Live-Beispiel

HTML-Code anzeigen

<div class="fwt-btn-stack">
    <button class="fwt-btn fwt-btn-primary" type="button">Erster Schritt</button>
    <button class="fwt-btn fwt-btn-secondary" type="button">Zweiter Schritt</button>
    <button class="fwt-btn fwt-btn-light" type="button">Dritter Schritt</button>
</div>

Split

Split-Button-Grundmuster

Ein Split-Button trennt Hauptaktion und weitere Optionen. In Release I ist das ein vorbereitetes Grundmuster ohne Dropdown-JavaScript.

Live-Beispiel

HTML-Code anzeigen

<div class="fwt-btn-split">
    <button class="fwt-btn fwt-btn-primary" type="button">Speichern</button>
    <button
        class="fwt-btn fwt-btn-primary fwt-btn-split-caret"
        type="button"
        aria-label="Weitere Speicheroptionen"
    ></button>
</div>

Das Dropdown-Verhalten kann später mit JavaScript ergänzt werden. Die Hauptaktion bleibt trotzdem direkt erreichbar.

Formularaktionen

Button-Gruppen für Formulare

Formularaktionen sollten klar zeigen, welche Aktion primär ist und welche nur ergänzend oder abbrechend wirkt.

Live-Beispiel

HTML-Code anzeigen

<div class="fwt-btn-form-actions fwt-btn-form-actions-between">
    <button class="fwt-btn fwt-btn-light" type="button">Zurück</button>

    <div class="fwt-btn-group">
        <button class="fwt-btn fwt-btn-secondary" type="button">Entwurf speichern</button>
        <button class="fwt-btn fwt-btn-primary" type="submit">Absenden</button>
    </div>
</div>

CTA

CTA-Button-Gruppen

CTA-Gruppen eignen sich für Startseiten, Landingpages und wichtige Handlungsbereiche.

Live-Beispiel

Jetzt starten Dokumentation ansehen

HTML-Code anzeigen

<div class="fwt-btn-cta-group">
    <a class="fwt-btn fwt-btn-primary" href="#">Jetzt starten</a>
    <a class="fwt-btn fwt-btn-secondary" href="#">Dokumentation ansehen</a>
</div>

Gefährliche Aktionen

Löschen, Zurücksetzen und Deaktivieren

Gefährliche Aktionen brauchen eine klare visuelle Bedeutung. Sie sollten nicht wie normale Nebenaktionen aussehen.

Live-Beispiel

HTML-Code anzeigen

<div class="fwt-actionbar">
    <div class="fwt-actionbar-main">
        <button class="fwt-btn fwt-btn-light" type="button">Abbrechen</button>
        <button class="fwt-btn fwt-btn-secondary" type="button">Vorher sichern</button>
    </div>

    <div class="fwt-actionbar-secondary">
        <button class="fwt-btn fwt-btn-danger" type="button">Eintrag löschen</button>
    </div>
</div>

Eine gefährliche Aktion sollte möglichst nicht direkt neben der Hauptaktion stehen, wenn dadurch Fehlklicks wahrscheinlicher werden.

Nutzung

Buttons richtig verwenden

Links führen zu Seiten oder Zielen. Buttons lösen Aktionen aus. Diese Trennung sollte auch optisch und technisch sauber bleiben.

Live-Beispiel

Zur Dokumentation

HTML-Code anzeigen

<div class="fwt-btn-group">
    <a class="fwt-btn fwt-btn-primary" href="#">Zur Dokumentation</a>
    <button class="fwt-btn fwt-btn-secondary" type="button">Beispiel öffnen</button>
</div>

Für Navigation zu einer anderen Seite ist ein Link mit Button-Klasse möglich.

Für Formularaktionen oder JavaScript-Aktionen sollte ein echtes button-Element verwendet werden.

Buttontexte sollten klar sagen, was passiert: besser „Anfrage senden“ als nur „OK“.