Buttons Stable

Buttons sind interaktive Aktionen innerhalb der Oberfläche.
Es gibt drei Button-Varianten: Primary, Secondary und Tertiary. Alle Varianten können mit oder ohne Icon verwendet werden.
Die Buttons können auch in einem deaktivierten Zustand verwendet werden, um anzuzeigen, dass die Aktion derzeit nicht verfügbar ist.

Beispiele Primary

Normal

Ein Primary Button ohne Icon, der die wichtigste Aktion auf einer Seite repräsentiert.


<button class="a-button -primary -blue"
        aria-label="Speichern">
    <span class="a-button__label" aria-hidden="true">
        Speichern
    </span>
</button>

Mit Icon

Ein Primary Button mit Icon, der die wichtigste Aktion auf einer Seite repräsentiert und durch das Icon visuell unterstützt wird.


<button class="a-button -primary -blue"
        aria-label="Suche">
    <span class="a-button__icon a-icon">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#search"></use>
        </svg>
    </span>
    <span class="a-button__label" aria-hidden="true">
        Primary Button with Icon
    </span>
</button>

Nur Icon

Ein Primary Button, der nur ein Icon enthält und die wichtigste Aktion auf einer Seite repräsentiert.


<button class="a-button -primary -blue"
        aria-label="Suche">
    <span class="a-button__icon a-icon">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#search"></use>
        </svg>
    </span>
</button>

Deaktiviert

Ein deaktivierter Primary Button, der anzeigt, dass die Aktion derzeit nicht verfügbar ist.


<button class="a-button -primary -blue" 
        aria-label="Suche" disabled>
    <span class="a-button__icon a-icon">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#search"></use>
        </svg>
    </span>
    <span class="a-button__label" aria-hidden="true">
        Primary Button with Icon disabled
    </span>
</button>

Beispiele Secondary

Normal

Ein Secondary Button ohne Icon, der eine weniger wichtige Aktion auf einer Seite repräsentiert.


<button class="a-button -secondary -blue"
        aria-label="Speichern">
    <span class="a-button__label" aria-hidden="true">
        Speichern
    </span>
</button>

Mit Icon

Ein Secondary Button mit Icon, der eine weniger wichtige Aktion auf einer Seite repräsentiert und durch das Icon visuell unterstützt wird.


<button class="a-button -secondary -blue"
        aria-label="Suche">
    <span class="a-button__icon a-icon">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#search"></use>
        </svg>
    </span>
    <span class="a-button__label" aria-hidden="true">
        Secondary Button with Icon
    </span>
</button>

Nur Icon

Ein Secondary Button, der nur ein Icon enthält und eine weniger wichtige Aktion auf einer Seite repräsentiert.


<button class="a-button -secondary -blue"
        aria-label="Suche">
    <span class="a-button__icon a-icon">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#search"></use>
        </svg>
    </span>
</button>

Deaktiviert

Ein deaktivierter Secondary Button, der anzeigt, dass die Aktion derzeit nicht verfügbar ist.


<button class="a-button -secondary -blue" 
        aria-label="Suche" disabled>
    <span class="a-button__icon a-icon">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#search"></use>
        </svg>
    </span>
    <span class="a-button__label" aria-hidden="true">
        Secondary Button with Icon disabled
    </span>
</button>

Beispiele Tertiary

Normal

Ein Tertiary Button ohne Icon, der eine Aktion auf einer Seite repräsentiert, die weniger wichtig ist als Primary und Secondary Buttons.


<button class="a-button -tertiary -blue"
        aria-label="Speichern">
    <span class="a-button__label" aria-hidden="true">
        Speichern
    </span>
</button>

Mit Icon

Ein Tertiary Button mit Icon, der eine Aktion auf einer Seite repräsentiert, die weniger wichtig ist als Primary und Secondary Buttons und durch das Icon visuell unterstützt wird.


<button class="a-button -tertiary -blue"
        aria-label="Suche">
    <span class="a-button__icon a-icon">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#search"></use>
        </svg>
    </span>
    <span class="a-button__label" aria-hidden="true">
        Tertiary Button with Icon
    </span>
</button>

Nur Icon

Ein Tertiary Button, der nur ein Icon enthält und eine Aktion auf einer Seite repräsentiert, die weniger wichtig ist als Primary und Secondary Buttons.


<button class="a-button -tertiary -blue"
        aria-label="Suche">
    <span class="a-button__icon a-icon">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#search"></use>
        </svg>
    </span>
</button>

Deaktiviert

Ein deaktivierter Tertiary Button, der anzeigt, dass die Aktion derzeit nicht verfügbar ist.


<button class="a-button -tertiary -blue" aria-label="Suche" disabled>
    <span class="a-button__icon a-icon">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#search"></use>
        </svg>
    </span>
    <span class="a-button__label" aria-hidden="true">
        Tertiary Button with Icon disabled
    </span>
</button>

Klassen

Klasse	Beschreibung
`.a-button`	Basis-Klasse für Schaltflächen.
`.a-button__icon`	Icon-Element innerhalb einer Schaltfläche.
`.a-button__label`	Label-Element innerhalb einer Schaltfläche.
`.-primary`	Modifikator für die primäre Schaltflächenvariante.
`.-secondary`	Modifikator für die sekundäre Schaltflächenvariante.
`.-tertiary`	Modifikator für die tertiäre Schaltflächenvariante.
`.-blue`	Modifikator für die blaue Farbvariante der Schaltfläche.
`disabled`	Deaktiviert die Schaltfläche.
`.a-icon`	Icon-Komponente für Buttons mit Icon.

Hinweise

Die Wahl der Schaltflächenvariante sollte auf der Wichtigkeit der Aktion basieren, die sie repräsentiert. Primary Buttons sollten für die wichtigste Aktion auf einer Seite verwendet werden, während Secondary und Tertiary Buttons für weniger wichtige Aktionen oder als Alternativen verwendet werden können.

Best Practices

Verwende Primary Buttons für die wichtigste Aktion einer Seite. Secondary Buttons eignen sich für Alternativen. Tertiary Buttons sollten für weniger wichtige Aktionen verwendet werden.

Mehrere Primary Buttons nebeneinander können die visuelle Hierarchie einer Seite schwächen.

Accessibility

Schaltflächen sollten immer eine klare und verständliche Beschriftung haben, damit Benutzer mit assistiven Technologien verstehen können, welche Aktion die Schaltfläche ausführt. Wenn eine Schaltfläche nur ein Icon enthält, sollte ein aussagekräftiger aria-label hinzugefügt werden, um die Funktion der Schaltfläche zu beschreiben.

Icon Only Button


<button
    class="a-button -primary -blue"
    aria-label="Suche">

    <span class="a-button__icon a-icon">
        <svg aria-hidden="true">
            <use href="/assets/icons/sprite.svg#search"></use>
        </svg>
    </span>
</button>