Button

Mit einem Button können User Aktionen ausführen. Je nach Bedarf kann ein Button – mit Text und/oder mit einem Icon – in verschiedenen Größen und Typen gewählt werden.

GitHub Markdown

Grundlagen

Mit einem Button können Aktionen ausgeführt werden. Entweder wird die Aktion direkt im Content-Bereich durchgeführt oder innerhalb eines Modal, ohne dass die Seite verlassen werden muss. Ein Button hat eine hohe Sichtbarkeit und sollte daher nicht zu übermäßig eingesetzt werden.

Best Practices

Achte bei der Verwendung eines Buttons darauf, dass ...

er für den User leicht zu finden und zu bedienen ist.
die richtige Art von Button für die auszuführende Aktion gewählt wurde.
er sparsam und gezielt verwendet wird, um eine gute Sichtbarkeit zu erhalten.
der Text oder das Icon die Aktion klar und verständlich vermitteln.

Verwendung

Verwende einen Button, um ...

Aktionen wie Speichern und Zurücksetzen in Formularen anzuzeigen.
ein Modal zu öffnen.
einen Erstellungsprozess zu starten oder auszuführen.
Aktionen in einem Modal anzubieten.

Button vs. Link

Buttons und Links werden häufig verwechselt. Um die beiden besser unterscheiden zu können, hier ein paar hilfreiche Anhaltspunkte.

Verwende Buttons, um z. B. ...

eine Aktion auszuführen oder ein Event zu starten, ohne die Seite zu verlassen.
Formulare zu speichern oder zurückzusetzen.
in einem Modal Aktionen auszuwählen.

Verwende Links, um z. B. ...

zu einer anderen Seite zu navigieren.
zu einem Anker auf der Seite zu scrollen.
eine externe Seite zu öffnen.
einen Download zu starten.

Anwendung

Position

Bei der Positionierung des Buttons sind folgende Punkte zu beachten:

Ein Button sollte gut sichtbar platziert werden, damit er vom User leicht gefunden wird.
Ein Button kann im Action-Bereich einer Section platziert werden, wenn er sich unmittelbar auf den Inhalt der Section bezieht.
Gruppiere Buttons derselben Variant und Color, um eine klare Struktur zu schaffen. Nutze dazu eine ActionGroup.
Ein Button sollte immer ausreichend Kontrast zum Hintergrund (min. 3:1) besitzen. Besonders auf farbigen Hintergründen empfiehlt es sich, dazu die Colors Light oder Dark zu verwenden.
Setze Buttons sparsam ein. Als Faustregel gilt, nicht mehr als zwei bis drei Buttons nebeneinander zu platzieren.

Hierarchie

Die verschiedenen Button-Variants folgen einer klaren Hierarchie:

Verwende die Solid-Variant in den Colors Primary, Accent oder Danger für die wichtigsten Aktionen. In der Regel sollte es pro Ansicht nur eine Hauptaktion geben.
Für fast gleichwertige Nebenaktionen eignet sich die Solid-Variante in der Farbe Secondary.
Die Soft-Variante passt gut für weniger wichtige Nebenaktionen, wie z. B. „Schließen“ oder „Zurück“.
Die Outline-Variante kann ebenfalls für Nebenaktionen genutzt werden, wird jedoch selten verwendet.
Für unauffälligere Aktionen, die weniger Aufmerksamkeit erfordern, eignet sich die Plain-Variante.
Versuche, Buttons derselben Variant bzw. Color zu gruppieren.

Do

Verwende zwei Solid-Button nebeneinander, wenn beide wichtige Aktionen enthalten.

Do

Verwende die Soft-Variant, um Nebenaktionen weniger wichtig erscheinen zu lassen.

Do

Versuche, ähnliche Buttons zu gruppieren. Zum Beispiel so, dass Buttons in der Solid-Variant nebeneinander stehen.

Don't

Ignoriere nicht die Hierarchie der Buttons, die sie zueinander haben.

Sizes

Buttons sind in den Sizes Medium und Small erhältlich. Die Höhe wird vom Inhalt des Buttons bestimmt.

Medium ist die Standardgröße und wird in den meisten Fällen verwendet.
Small wird seltener verwendet und ist für Buttons gedacht, die platzsparender sein sollten.

Don't

Verwende nie Buttons in den Sizes Medium und Small direkt nebeneinander.

Feedback

Zeige dem User immer an, dass der Klick auf den Button eine Aktion auslöst:

Ein Modal öffnet sich.
Ein Spinner, Häkchen oder ein Kreuz wird angezeigt, um zu signalisieren, dass ein Prozess läuft, erfolgreich war oder fehlgeschlagen ist. Für die Steuerung wird die Action-Component verwendet.
Mit den unterschiedlichen States eines Buttons, die Interaktivität vermitteln.

Writing Guidelines

Text

Achte beim Verfassen des Textes besonders auf:

Der Button sollte maximal zwei Wörter als Beschreibung beinhalten.
Die Aktion, die sich hinter dem Button verbirgt, sollte klar aus dem Text hervorgehen.
Der Text im Button sollte nie mehrzeilig sein und auch auf kleinen Bildschirmgrößen funktionieren. Zu langer Text wird automatisch auspunktiert.
Das erste Wort im Button beginnt immer mit einem Großbuchstaben. Vermeide es, den Button ausschließlich in Großbuchstaben zu beschreiben.

Do

Beschreibe die Aktion kurz und prägnant.

Don't

Werde nicht mehrzeilig und verwende nicht zu viele Wörter.

Do

Beschreibe exakt und kurz, welche Aktion sich hinter den Buttons verbergen.

Don't

Verwirre den User nicht mit mehrdeutigen Begriffen.

Icon

Achte bei der Auswahl des Icons besonders darauf, dass die Icon-Component verwendet und ein universell verständliches Icon gewählt wird.

Do

Verwende Icons, die die Funktion hinter dem Icon visuell verdeutlichen.

Don't

Verwende keine Icons die nur gut aussehen, aber keine Funktion widerspiegeln.

Text mit Icon

Bei einer Kombination von Text und Icon muss das Icon dem User einen Mehrwert bieten. Es darf keinem rein dekorativen Zweck dienen und sollte dem User stattdessen helfen, die Funktion des Buttons zu verstehen.

Das Icon darf keinen rein dekorativen Zweck erfüllen.
Das Icon sollte dem User verdeutlichen, welche Funktion oder Aktion sich hinter dem Button verbirgt. Dies kann z. B. der Fall sein, wenn ein Chevron-Icon den User darauf hinweist, dass der Button ein Dropdown öffnet.

Do

Das Chevron-Icon zeigt an, dass ein Dropdown sich nach einem Klick öffnet.

Verhalten

Responsive Layout

Buttons behalten auch auf schmaleren Bildschirmen ihre Breite, es sei denn, sie befinden sich in der Modal-Navigation. Dort füllen sie die volle Breite des Contents an, wenn die Bildschirmbreite kleiner als 400 px ist.

Projekte

...

Mobile Text- und Icon-Buttons

Buttons behalten in den meisten Fällen auch bei schmaleren Bildschirmbreiten die gewählte Größe. Die Position der Buttons kann sich jedoch der Breite anpassen.

Mobile Modal-Buttons

Um auch mobil eine schnelle Navigation durch ein Modal zu ermöglichen, füllen die Buttons im unteren Bereich des Modals die gesamte Breite des Contents aus.

Accessibility

Achte beim Button darauf, dass ...

ein Tooltip das Icon beschreibt, wenn das Icon selbst nicht verständlich genug ist
man den Button auch per Tastatur erreichen kann.
der Screenreader den Button als Button erkennt.

Icon

Bei einem reinen Icon-Button müssen folgende Dinge beachtet werden:

Das Icon erhält in diesem Fall automatisch das Attribut aria-hidden=true.
Verwende ein aria-label, um die Aktion des Buttons zu beschreiben.
Achte außerdem darauf, einen Tooltip anzuzeigen, der die Aktion beschreibt.

Color

Achte bei den Colors Light und Dark auf einen genügenden Kontrast zum Hintergrund. Es wird empfohlen, eine Color in Light zu verwenden, wenn der HSL Lightness-Wert des Hintergrunds weniger als 50 ist. Die Color Dark wird für Hintergründe empfohlen, die einen HSL Lightness-Wert von größer als 50 haben.

Für beide Colors gilt: Je weiter der HSL Lightness-Wert von 50 entfernt ist, desto besser ist der Kontrast.

Do

Die Color Light kommt besonders gut auf sehr dunklen Hintergründen zur Geltung. Verwende sie auf Hintergründen mit einem HSL Lightness-Wert von weniger als 50.

Do

Color Dark kommt besonders gut auf sehr hellen Hintergründen zur Geltung. Verwende sie auf Hintergründen mit einem HSL Lightness-Wert von über 50.

Playground

Verwende <Button />, um einen Button darzustellen.

Benutze das onPress Property um die Interaktion mit Maus, Keyboard oder Touch zu ermöglichen.

import { Button } from "@mittwald/flow-react-components";

<Button
  onPress={() => {
    alert("Button gedrückt");
  }}
>
  Button
</Button>

Variants

Beim Button wird zwischen den Variants Solid, Soft, Outline und Plain unterschieden.

Solid: Die Solid-Variant zeichnet sich durch ein flächiges und auffälliges Aussehen aus. Aus diesem Grund verbergen sich in der Regel die Hauptaktionen hinter einem Solid-Button.

Soft: Die Soft-Variant verleiht dem Button einen softeren Touch und eignet sich daher gut für sekundäre Aktionen.

Outline: Die Outline-Variant wirkt durch den Verzicht auf eine Hintergrundfarbe dezent. Durch den Rahmen bleibt sie weiterhin präsent, ohne dominant zu erscheinen.

Plain: Die Plain-Variant ist weniger auffällig als die anderen Variants und wird für weniger wichtige oder versteckte Aktionen verwendet.

Color

Je nach Bedarf stehen vier Button-Color zur Auswahl: Primary, Secondary, Accent und Danger.

Primary: Verwende die Primary-Color für Hauptaktionen, wenn der Kontext keinen Accent- oder Danger-Button erfordert.

Secondary: Die Secondary-Color wird für Nebenaktionen verwendet. Um dies zu verdeutlichen, wird die Secondary-Color häufig als Soft-Variant verwendet.

Accent: Die grüne Farbe der Accent-Color soll dem Button eine positive Bedeutung verleihen. Daher wird diese Color vor allem im Kontext von Erstellungs-, Speicher- oder Bestellvorgängen verwendet.

Danger: Die Danger-Color zeichnet sich durch die rote Farbe aus, die davor warnen soll, dass sich hinter dem Button eine negative Konsequenz verbirgt. Beispielsweise kann sich hinter dem Button eine Lösch- oder Kündigungsfunktion verbergen.

Light und Dark

Zusätzlich zu den Standard-Colors, können Button in Light und Dark dargestellt werden. Beide Colors sind Alternativen zu den herkömmlichen Farben, falls diese nicht auf farbigen oder dekorativen Hintergründen funktionieren.

Light: Verwende die Light-Color, bei dunklen Hintergründen mit einem HSL Lightness-Wert von weniger als 50.

Dark: Verwende die Dark-Color, bei hellen, farbigen Hintergründen mit einem HSL Lightness-Wert von größer als 50.

Sizes

Die Size des Buttons kann Small oder Medium sein. Medium ist die Standardgröße und wird für die meisten Buttons verwendet.

States

Ein Button kann unterschiedliche States annehmen, die anzeigen, dass aktuell keine Interaktion möglich ist.

Disabled: Verwende den Disabled-State, wenn der Button keine Aktion oder kein Ereignis auslösen soll.

Pending, Succeeded und Failed: Pending, Succeeded und Failed sollen dem Nutzer signalisieren, dass im Hintergrund etwas passiert, wenn er auf einen Button geklickt hat. Verwende den Button zusammen mit der Component Action, um die States zu steuern.

Kombiniere mit ...

Im Content-Bereich des Buttons kann entweder Text, ein Icon oder Text mit einem Icon am Ende beinhalten.

Icon

Verwende <Icon /> in einem <Button />, um ein Icon statt Text im Button anzuzeigen.

Text und Icon

Verwende <Text /> und <Icon /> zusammen, um sowohl Text als auch Icon im Button anzuzeigen. Achte darauf, dass das Icon dem User einen Mehrwert bietet und nicht nur einen dekorativen Zweck erfüllt. Zum Beispiel indiziert ein Chevron-Icon, dass der Button ein Dropdown öffnet. Ein Close-Icon zeigt an, dass der Button als Filterelement wieder entfernt werden kann.

Align

Benutze die Align Component, um deinen Button neben Input Feldern zu platzieren.

Weiterleitungsziel(optional)

Properties

Property	Type	Default	Description
`slot`	`string`	-	Slot for button placement in action groups.
`color`	`"danger" \| "primary" \| "dark" \| "light" \| "dark-static" \| "light-static" \| "accent" \| "secondary"`	"primary"	The color of the button.
`variant`	`"solid" \| "plain" \| "soft" \| "outline"`	"solid"	The visual variant of the button.
`size`	`"s" \| "m"`	"m"	The size of the button.
`isPending`	`boolean`	-	Whether the button is in a pending state.
`isSucceeded`	`boolean`	-	Whether the button is in a succeeded state.
`isFailed`	`boolean`	-	Whether the button is in a failed state.
`isReadOnly`	`boolean`	-	Whether the button is in a read only state.
`className`	`ClassNameOrFunction<ButtonRenderProps>`	'react-aria-Button'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
`isDisabled`	`boolean`	-	Whether the button is disabled.
`autoFocus`	`boolean`	-	Whether the element should receive focus on render.
`value`	`string`	-	The value associated with the button's name when it's submitted with the form data.
`id`	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`name`	`string`	-	Submitted as a pair with the button's value as part of the form data.
`form`	`string`	-	The `<form>` element to associate the button with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form).
`excludeFromTabOrder`	`boolean`	-	Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
`type`	`"button" \| "submit" \| "reset"`	'button'	The behavior of the button when used in an HTML form.
`formAction`	`string \| ((formData: FormData) => void \| Promise<void>)`	-	The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.
`formEncType`	`string`	-	Indicates how to encode the form data that is submitted.
`formMethod`	`string`	-	Indicates the HTTP method used to submit the form.
`formNoValidate`	`boolean`	-	Indicates that the form is not to be validated when it is submitted.
`formTarget`	`string`	-	Overrides the target attribute of the button's form owner.
`preventFocusOnPress`	`boolean`	-	Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.
`children`	`ReactNode`	-	The children of the component. A function may be provided to alter the children based on component state.
`style`	`StyleOrFunction<TooltipRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`render`	`DOMRenderFunction<"div", TooltipRenderProps>`	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`dir`	`string`	-
`lang`	`string`	-
`hidden`	`boolean`	-
`inert`	`boolean`	-
`translate`	`"yes" \| "no"`	-
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`ref`	`Ref<HTMLSpanElement>`	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	`Key`	-

Events

Property	Type	Default	Description
`onClick`	`((e: MouseEvent<FocusableElement, MouseEvent>) => void)`	-	Not recommended – use `onPress` instead. `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.
`onFocus`	`((e: FocusEvent<Element, Element>) => void)`	-	Handler that is called when the element receives focus.
`onBlur`	`((e: FocusEvent<Element, Element>) => void)`	-	Handler that is called when the element loses focus.
`onFocusChange`	`((isFocused: boolean) => void)`	-	Handler that is called when the element's focus status changes.
`onKeyDown`	`((e: KeyboardEvent) => void)`	-	Handler that is called when a key is pressed.
`onKeyUp`	`((e: KeyboardEvent) => void)`	-	Handler that is called when a key is released.
`onPress`	`((e: PressEvent) => void)`	-	Handler that is called when the press is released over the target.
`onPressStart`	`((e: PressEvent) => void)`	-	Handler that is called when a press interaction starts.
`onPressEnd`	`((e: PressEvent) => void)`	-	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
`onPressChange`	`((isPressed: boolean) => void)`	-	Handler that is called when the press state changes.
`onPressUp`	`((e: PressEvent) => void)`	-	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
`onHoverStart`	`((e: HoverEvent) => void)`	-	Handler that is called when a hover interaction starts.
`onHoverEnd`	`((e: HoverEvent) => void)`	-	Handler that is called when a hover interaction ends.
`onHoverChange`	`((isHovering: boolean) => void)`	-	Handler that is called when the hover state changes.
`onClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClick`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenu`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenuCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClick`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDown`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDownCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseEnter`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseLeave`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMove`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMoveCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOut`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOutCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOver`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOverCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUp`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUpCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onTouchCancel`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchCancelCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEnd`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEndCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMove`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMoveCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStart`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStartCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onPointerDown`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerDownCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMove`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMoveCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUp`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUpCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancel`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancelCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerEnter`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerLeave`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOver`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOverCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOut`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOutCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onScroll`	`UIEventHandler<HTMLDivElement>`	-
`onScrollCapture`	`UIEventHandler<HTMLDivElement>`	-
`onWheel`	`WheelEventHandler<HTMLDivElement>`	-
`onWheelCapture`	`WheelEventHandler<HTMLDivElement>`	-
`onAnimationStart`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationStartCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEnd`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEndCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIteration`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIterationCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onTransitionCancel`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionCancelCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEnd`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEndCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRun`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRunCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStart`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStartCapture`	`TransitionEventHandler<HTMLDivElement>`	-

Accessibility

Property	Type	Default	Description
`aria-disabled`	`boolean`	-	Disables button but keeps it focusable.
`aria-label`	`string`	-	Defines a string value that labels the current element.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-haspopup`	`boolean \| "false" \| "true" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"`	-	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`aria-controls`	`string`	-	Identifies the element (or elements) whose contents or presence are controlled by the current element.
`aria-current`	`boolean \| "step" \| "false" \| "true" \| "time" \| "page" \| "location" \| "date"`	-	Indicates whether this element represents the current item within a container or set of related elements.
`aria-expanded`	`boolean \| "false" \| "true"`	-	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`aria-pressed`	`boolean \| "false" \| "true" \| "mixed"`	-	Indicates the current "pressed" state of toggle buttons.

Button

Grundlagen

Best Practices

Verwendung

Button vs. Link

Verwende Buttons, um z. B. ...

Verwende Links, um z. B. ...

Anwendung

Position

Hierarchie

Do

Do

Do

Don't

Sizes

Don't

Feedback

Writing Guidelines

Text

Do

Don't

Do

Don't

Icon

Do

Don't

Text mit Icon

Do

Verhalten

Responsive Layout

Projekte

Mobile Text- und Icon-Buttons

Mobile Modal-Buttons

Accessibility

Icon

Color

Do

Do

Playground

Variants

Color

Light und Dark

Sizes

States

Kombiniere mit ...

Icon

Text und Icon

Align

Properties

Events

Accessibility

Auf dieser Seite

Verwende Buttons, um z. B. ...

Verwende Links, um z. B. ...