Skip to main content

Button

Buttons dienen dazu, Benutzer:innen Auswahlmöglichkeiten für Aktionen anzuzeigen und diese in einer klaren Hierarchie anzuordnen. Sie helfen Nutzer:innen, die wichtigsten Aktionen einer Seite oder innerhalb eines Viewports zu finden und ermöglichen es ihnen, diese Aktionen auszuführen. Die Beschriftung des Buttons wird verwendet, um Nutzer:innen klar anzuzeigen, welche Aktion ausgelöst wird. Buttons ermöglichen es Nutzer:innen, eine Änderung zu bestätigen, Schritte in einer Aufgabe abzuschließen oder Entscheidungen zu treffen.

Konstruktion

Code

<kol-button _label="Primary" _variant="primary"></kol-button>
<kol-button _label="Secondary" _variant="secondary"></kol-button>
<kol-button _label="Normal" _variant="normal"></kol-button>
<kol-button _label="Danger" _variant="danger"></kol-button>
<kol-button _label="Ghost" _variant="ghost"></kol-button>

Beispiel

Default

Disabled

Verwendung

Beschriftung

Für die eindeutige Beschriftung des Buttons nutzen Sie das Attribut _label. _label="Schaltflächenbeschriftung"

Icon

Ein Icon (_icon) kann entweder als String angegeben werden, oder als Objekt. Als String übergeben Sie die Iconklasse (z.B.: _icon="codicon codicon-home), das Icon wird links vom Text angezeigt. Das Objekt ist vom Typ KoliBriAllIcon, kann also einen oder mehrere der Schlüssel top, right, bottom und left besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ KoliBriCustomIcon, welches aus icon (String, siehe oben) und style (optional, Styleobjekt) besteht.

Schaltfläche ohne Text

Mittels _iconOnly wird die Schaltfläche nur das icon anzeigen ()

Beachten Sie, dass das Attribut _label auch dann gesetzt werden muss, wenn nur ein Icon angezeigt werden soll, dieses wird von Screenreadern vorgelesen und in den Tooltip gesetzt.

Darstellung angeben

Zur Steuerung der Darstellung verwenden Sie das Attribut _variant. Der Standardwert ist primary, alternativ kann auch primary, secondary, normal, danger, ghost, oder custom gesetzt werden.

Über die Verwendung des Wertes custom kann eine eigene Darstellung gewählt werden. Verpflichtend ist in diesem Fall das Setzen des Attribut _custom-class, damit die Schaltfläche im Shadow-Dom mittels CSS selektiert werden kann.

Best practices

  • Verwenden Sie eine primäre Schaltfläche für die nächstbeste Aktion. Verbleibende Calls-to-Action sollten als sekundäre Schaltfläche dargestellt werden.
  • Verwenden Sie Schaltflächen an einheitlichen Stellen in der Benutzeroberfläche, um die Benutzererfahrung zu verbessern.
  • Verwenden Sie nur eine primäre Schaltfläche je Viewport. Auf der gesamten Seite kann ein Button-Style beliebig oft auftreten.
  • Die Beschriftung des Button muss die Aktion beschreiben, die die Schaltfläche ausführt. Sie sollte ein Verb enthalten (z.B. Speichern). Verwenden Sie prägnante, spezifische, selbsterklärende Beschriftungen.
  • Schaltflächenbeschriftungen sollten immer dann auch ein Nomen enthalten, wenn es Raum für Interpretationen darüber gibt, wofür das Verb zuständig ist. Verwenden Sie keine generischen Bezeichnungen wie "OK", insbesondere nicht im Fehlerfall. Fehler sind nie "OK".
  • Verwenden Sie nicht mehrere Buttons im Style "primär" innerhalb einer Gruppierung.
  • Verwenden Sie Buttons nicht als Link oder als Navigationselement.

Barrierefreiheit

Für Menschen mit einem eingeschränkten Sichtfeld ist die Positionierung des Icons im Button links von der Beschriftung optimal.

Probleme mit Disabled-Status

  • Darstellung Kontraste
  • Möglichkeit des Nutzerfeedbacks

Tastatursteuerung

TasteFunktion
TabSpringt den einzelnen Button an und fokussiert ihn.
EnterFührt die onClick-Methode der fokussierten Schaltfläche aus.

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyGibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.string | undefinedundefined
_ariaControls_aria-controlsGibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)string | undefinedundefined
_ariaCurrent_aria-currentGibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)"date" | "location" | "page" | "step" | "time" | boolean | undefinedundefined
_ariaExpanded_aria-expandedGibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)boolean | undefinedundefined
_ariaLabel_aria-labelGibt einen beschreibenden Text des Buttons an. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)string | undefinedundefined
_ariaSelected_aria-selectedGibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)boolean | undefinedundefined
_customClass_custom-classGibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.string | undefinedundefined
_disabled_disabledGibt an, ob der Button deaktiviert ist.boolean | undefinedfalse
_icon_iconIconklasse (z.B.: "codicon codicon-home")KoliBriHorizontalIcon & KoliBriVerticalIcon | string | undefinedundefined
_iconAlign_icon-align[DEPRECATED]

Gibt an, ob das Icon links oder rechts dargestellt werden soll.
"bottom" | "left" | "right" | "top" | undefinedundefined
_iconOnly_icon-onlyGibt an, ob nur das Icon angezeigt wird.boolean | undefinedfalse
_id_idGibt die ID der Schaltfläche an.string | undefinedundefined
_label (required)_labelSetzt den sichtbaren Text des Elements.stringundefined
_on--Gibt die EventCallback-Funktionen für die Button-Events an.undefined | { onClick?: EventValueOrEventCallback<MouseEvent, unknown> | undefined; onMouseDown?: EventCallback<MouseEvent> | undefined; }undefined
_role_roleGibt an, welche Role der Schalter hat."button" | "link" | "tab" | undefinedundefined
_tabIndex_tab-indexGibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_tooltipAlign_tooltip-alignGibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll."bottom" | "left" | "right" | "top" | undefined'top'
_type_typeGibt an, welche Typ der Button hat."button" | "reset" | "submit" | undefined'button'
_value--Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.unknownundefined
_variant_variantGibt an, welche Ausprägung der Button hat."custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | undefined'normal'

Dependencies

Used by

Depends on

  • kol-button-wc

Graph


Live-Editor

Beispiele

Buttons

Icon-Buttons

Button mit Icons

Buttons mit einheitlicher Breite