Diggi Docs

Button

Buttons sind Schaltflächen, die eine zugeordnete Funktion aktivieren. Buttons müssen immer so beschriftet sein, dass für den Nutzer eindeutig hervorgeht, welche Funktion ausgelöst wird.

Tipp! Der Label-Text sollte immer sehr kurz und prägnant sein. Der Nutzer muss schnell und eindeutig erfassen können, welche Aktion mit dem Button ausgeführt wird. Ebenso wird damit gewährleistet, dass der Label-Text in allen Viewports sichtbar bleibt.

Verwendung

Dynamische Breite

Die Größe des Buttons ist abhängig von der Textlänge.

Fixierte Breite

Die Breite des Buttons ist fest definiert.

Eigenschaften

Name	Type	Default Value	Description
type	string	undefined	Type of Attribute (button, submit, reset)
mode	string	undefined	Type of Button Definition (Primary, Secondary, Tertiary, Integrated or Inverted)
label	string	undefined	Label to Display
disabled	boolean	false	Disable or not the Button
icon	string	undefined	Icon to Display
isUiIcon	boolean	false	whether or not it's an icon from the UI font or not
fixedWidth	boolean	false	Fixed or not fixed width
action	string	undefined	Name of the action this button should be used for
title	string	undefined	Title to be displayed on hover
tabIndex	number	undefined	Index of sequential keyboard navigation
ariaHasPopup	string	undefined	Accessibility role. Used for popup context menu or sub-level menu.
ariaExpanded	string	undefined	Accessibility expanded. Used for toggle button.
ariaLabel	string	undefined	Accessibility label. Used if label doesn't exist.
ariaLabelledBy	string	undefined	Accessibility label. Used if label does exist.
style	string	undefined	Additional css styles

Events

Name	Description
click	Click event will be dispatched on click if button is not disabled.
mousedown

Beispiele

Primary Button

Der Primary Button wird für die wichtigste Funktion eines Screens verwendet. Es sollte immer nur ein Primary Button pro Screen verwendet werden.

Secondary Button

Der Secondary Button kann alleine oder in Kombination mit einem Primary Button eingesetzt werden. Die Anzahl an Secondary Buttons in einem Screen ist möglichst gering zu halten.

ich bin eigentlich ein link

Tertiary Button

Der Tertiary Button kann für alle Funktionen verwendet werden, die nicht besonders hervorgehoben werden sollen.

Integrated Button

Der Integrated Button wird vorwiegend in Kombination mit anderen Core-Elementen verwendet. So zum Beispiel als Close Icon für Dialog und Popover. Der Integrated Button kann nur verwendet werden, wenn durch die Position und Kontext eindeutig klar wird, dass es sich um einen Button handelt.

Debug Sizes

test

Do's and Don'ts

Do

Don't

Richtige Button-Hierarchie: Hierarchisch angeordnete Buttons helfen dem Nutzer, sich im Interface zurechtzufinden

Der Primary Button darf nicht mehrfach auftauchen

Do

Don't

Einsatz des Integrated Button im Dialog

Buttons mit fixierter Breite und dynamischer Breite werden nicht kombiniert