FigmaOpenCode

Button

Synonyme: Schaltfläche, Befehlsschaltfläche, Schalter, Push Button
Ähnliche Komponenten: Link

Kurzbeschreibung

Ein Button löst eine Aktion aus, seine Beschriftung benennt diese Aktion.

Beispiele

• EFA Theme
• KERN Theme

Loading...

<div className="component-row">
<KernButton _label="Primary" _variant="primary"></KernButton>
<KernButton _label="Secondary" _variant="secondary"></KernButton>
<KernButton _label="Secondary" _variant="secondary"></KernButton>
</div>

<div className="component-row">
<KernButton  _label="Primary" _variant="primary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_forward' } }"></KernButton>
<KernButton _label="Secondary" _variant="secondary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_back' } }"></KernButton>
<KernButton _label="Tertiary" _variant="tertiary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_forward' } }"></KernButton>
</div>

<div className="component-row">
<KernButton _hide-label="true" _label="Primary" _variant="primary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_forward' } }"></KernButton>
<KernButton _hide-label="true" _label="Secondary" _variant="secondary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_back' } }"></KernButton>
<KernButton _hide-label="true" _label="Tertiary" _variant="tertiary" _icons="{ 'left': { 'icon': 'material-symbols-outlined arrow_forward' } }"></KernButton>
</div>

<div className="component-row">
<KernButton _label="Primary" _variant="primary" _disabled></KernButton>
<KernButton _label="Secondary" _variant="secondary" _disabled></KernButton>
<KernButton _label="Tertiary" _variant="tertiary" _disabled></KernButton>
</div>

Beschreibung

Mit einem Button können User eine Aktion auslösen. Diese Aktionen können Bestätigungen, das Absenden von Informationen, das Ändern von Daten oder der Übergang zu einem nächsten Prozessschritt sein. Ein Button enthält eine Beschriftung (Label), die die auszuführende Aktion knapp und präzise beschreibt. Zur visuellen Unterstützung können Buttons auch Icons enthalten.

Verwendungsregeln

Für eine konsistente Nutzerführung bieten wir drei verschiedene Button-Kategorien an, die sich in ihrer Wichtigkeit unterscheiden:

Primär

Die wesentliche Funktion einer Seite oder Ansicht wird mit dem Primären Button ausgelöst oder gesteuert. Jede Seite enthält nur einen primären Button. Alle weiteren Buttons lassen sich durch Anordnung und Aussehen als weniger wichtig erkennen.

Sekundär

Sekundäre Buttons ergänzen den primären Button, zum Beispiel um eine gegenteilige Aktion – etwa „Abbrechen“ oder „Zurück“ – auszuführen. Nutze so wenig Buttons je Seite wie möglich, um Nutzer:innen fokussiert zu halten und nicht zu verwirren. Sollte sich dennoch ein Reihe von sekundären Buttons ansammeln, versuche eher die Inhalte dieser Seite bzw. den Dienst in kleinere Abschnitte aufzuteilen.

Tertiär

Nutze den tertiären Button, um Funktionen, die nicht in direktem Zusammenhang mit der Hauptfunktion stehen – zum Beispiel Daten nach einem Kriterium sortieren – visuell deutlich abzugrenzen und dennoch als Funktion erkennbar zu halten. Beispiele: „Abbrechen“ oder „Modal schließen“.

Icons

Nutze Icons in Buttons nur dann, wenn sie Nutzenden helfen, die Funktion des Buttons schneller zu erfassen. Zum Beispiel

• in einem Prozess einen Schritt zurückgehen: Pfeil nach links
• Daten löschen: Mülleimer
• Suche starten: Lupe.

Icon-Position

Das Icon steht standardmäßig einleitend links vor dem Label. Es kann auch rechts stehen, wenn es zum Verständnis des Ablaufs beiträgt, zum Beispiel wenn es „weiter“ geht.

Nur Icon

Ist der Raum für Buttons mit ausgeschriebenen Labels zu klein, nutze die Icon-only-Variante. Achte dabei unbedingt auf ausreichende Bekanntheit des Icons. Icon-only-Buttons müssen eine beschreibende Ergänzung im alt-Attribut haben.

Inaktiv

Inaktive Buttons zeigen, dass eine Funktion grundsätzlich vorhanden ist, aber in diesem Moment nicht zur Verfügung steht. Wegen des oftmals schlechten Kontrasts und der Verwechslung mit anderen Buttons solltest du jedoch auf inaktive Buttons wenn möglich verzichten. Nur wenn sie zum Verständnis, dem Wiedererkennen oder der Konsistenz des gesamten User-Interfaces beitragen, solltest du sie nutzen.

Block-Button

Für mobile Ansichten setze den Block-Button ein. Seine Breite orientiert sich nicht an der Laufweite des Textes, sondern an der Breite des Bildschirms und ist damit übersichtlicher.

Dos und Don’ts

Verwende nur einen primären Button je Seite.

Verwende gemischte Schreibweise anstelle von Großbuchstaben.

Wenn mehrere Buttons mit unterschiedlicher Wichtigkeit nebeneinander stehen, hebe den Wichtigeren hervor.

Platziere Buttons nicht untereinander, sondern nebeneinander, sofern der Raum dafür vorhanden ist.

Vermeide zwei- oder mehrzeilige Beschriftungen.

Verwende Buttons nicht inline in Texten, nutze dafür Textlinks.

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften (Größe, Kontrastverhältnis) für barrierefreie Dienste. Achte in der angewandten Nutzung darauf, dass Label auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind bzw. über das „alt“-Attribut verständlich umschrieben sind.

• Das Drücken der Enter-Taste ist das Tastatur-Pendant für einen Klick auf den Button.
• Setze niemals Sonderzeichen, wie die "größer/kleiner als"-Zeichen < bzw. > oder den Buchstaben x als Icon ein. Diese werden als Schrift interpretiert und vom Screenreader entsprechend mit vorgelesen, was zu Irritationen führen kann.
• Falls Schriftzeichen als Bestandteil eines Buttons zwingend genutzt werden müssen, sollten diese über ein „aria-hidden=true“ für den Screenreader versteckt werden.
• Inaktive Buttons sollten über ein „aria-disabled=true“ ausgezeichnet werden und nicht nur mittels „disabled“. Die „ausgegrauten“ Buttons müssen trotz Inaktivität per Tastatur ansteuerbar und für den Screenreader ausgebbar sein (siehe dazu: Button - Web accessibility checklist - MagentaA11y).
• Für die Sprachsteuerung muss die sichtbare Beschriftung eines Buttons auch mit dem „assistiven“ Namen (z.B. aria-label) übereinstimmen bzw. Inhalt von dessen sein. Positiv-Beispiel: Der sichtbare Button-Name lautet „Hinzufügen“, über ein aria-label ist der assistive Name „Einen neuen Eintrag hinzufügen“ gesetzt. Negativbeispiel wäre, wenn der assistive Name „Neuen Eintrag ergänzen“ also kein „hinzufügen“ beinhalten würde.

Siehe auch: BFIT Handreichungen

Properties

Property	Attribute	Description	Type	Default
_accessKey	_access-key	Defines the elements access key.	string | undefined	undefined
_ariaControls	_aria-controls	Definiert, welche Elemente von dieser Komponente gesteuert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)	string | undefined	undefined
_ariaExpanded	_aria-expanded	Definiert, ob das interaktive Element der Komponente etwas erweitert hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)	boolean | undefined	undefined
_ariaSelected	_aria-selected	Definiert, ob das interaktive Element der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)	boolean | undefined	undefined
_customClass	_custom-class	Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.	string | undefined	undefined
_disabled	_disabled	Gibt an, ob der Button deaktiviert ist.	boolean | undefined	false
_hideLabel	_hide-label	Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.	boolean | undefined	false
_icons	_icons	Setzt die Iconklasse (z.B.: _icon="material-symbols-outlined home").	string | undefined	undefined
_id	_id	Defines the internal ID of the primary component element.	string | undefined	undefined
_label (required)	_label	Gibt den Text des Buttons an.	string	undefined
_name	_name	Defines the technical name of an input field.	string | undefined	undefined
_on	--	Definiert die Rückruffunktionen für Button-Ereignisse.	undefined | { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> | undefined; onMouseDown?: EventCallback<MouseEvent> | undefined; }	undefined
_type	_type	Definiert entweder den Typ der Komponente oder des interaktiven Elements der Komponente.	"button" | "reset" | "submit" | undefined	'button'
_variant	_variant	Gibt an, welche Ausprägung der Button hat.	"custom" | "primary" | "secondary" | "tertiary" | undefined	'primary'