# 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.

## Overview

# Playground

Verwende `<Button />`, um einen Button darzustellen.

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

```tsx
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.

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

<>
  <Button>Solid</Button>
  <Button variant="soft">Soft</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="plain">Plain</Button>
</>
```

**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**.

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

<>
  <Button color="primary">Fortfahren/Aktion</Button>
  <Button color="secondary">Abbrechen/Zurück</Button>
  <Button color="accent">Erstellen/Speichern</Button>
  <Button color="danger">Löschen/Kündigen</Button>
</>
```

**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.

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

<>
  <Button color="light">Light</Button>
  <Button variant="soft" color="light">
    Light
  </Button>
  <Button variant="outline" color="light">
    Light
  </Button>
  <Button variant="plain" color="light">
    Light
  </Button>
</>
```

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

<>
  <Button color="dark">Dark</Button>
  <Button variant="soft" color="dark">
    Dark
  </Button>
  <Button variant="outline" color="dark">
    Dark
  </Button>
  <Button variant="plain" color="dark">
    Dark
  </Button>
</>
```

**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.

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

<>
  <Button size="s">Small</Button>
  <Button>Medium</Button>
</>
```

---

# 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.

```tsx
import {
  Button,
  IconHome,
} from "@mittwald/flow-react-components";

<>
  <Button size="s" aria-label="Home">
    <IconHome />
  </Button>
  <Button aria-label="Home">
    <IconHome />
  </Button>
</>
```

## 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.

```tsx
import {
  Button,
  IconChevronDown,
  IconClose,
  Text,
} from "@mittwald/flow-react-components";

<>
  <Button size="s">
    <Text>E-Mail hinzufügen</Text>
    <IconChevronDown />
  </Button>
  <Button>
    <Text>E-Mail hinzufügen</Text>
    <IconChevronDown />
  </Button>
  <Button size="s">
    <Text>Filter</Text>
    <IconClose />
  </Button>
  <Button>
    <Text>Filter</Text>
    <IconClose />
  </Button>
</>
```

## Align

Benutze die [Align](/04-components/structure/align/overview) Komponente, um
deinen Button neben Input Feldern zu platzieren.

```tsx
import {
  Align,
  Button,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<Align>
  <TextField>
    <Label>Weiterleitungsziel</Label>
  </TextField>
  <Button>Hinzufügen</Button>
</Align>
```

---

# States

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

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

<>
  <Button isDisabled>Fortfahren/Aktion</Button>
  <Button isPending>Fortfahren/Aktion</Button>
  <Button isSucceeded>Fortfahren/Aktion</Button>
  <Button isFailed>Fortfahren/Aktion</Button>
</>
```

**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 Komponente
[Action](/04-components/actions/action/overview), um die States zu steuern.


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `slot` | `string` | - | Slot for button placement in action groups. |
| `color` | `"dark" \| "light" \| "dark-static" \| "light-static" \| "danger" \| "primary" \| "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. |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `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. |
| `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. |
| `translate` | `"yes" \| "no"` | - | - |
| `dir` | `string` | - | - |
| `lang` | `string` | - | - |
| `hidden` | `boolean` | - | - |
| `inert` | `boolean` | - | - |
| `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](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `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" \| "page" \| "location" \| "date" \| "time"` | - | 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. |


## Guidelines

# Grundlagen

Mit einem Button können Aktionen ausgeführt werden. Entweder wird die Aktion
direkt im Content-Bereich durchgeführt oder innerhalb eines
[Modal](/04-components/overlays/modal/overview), 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](/04-components/overlays/modal/overview) zu öffnen.
- einen Erstellungsprozess zu starten oder auszuführen.
- Aktionen in einem Modal anzubieten.

## Button vs. Link

Buttons und [Links](/04-components/navigation/link/overview) werden häufig
verwechselt. Um die beiden besser unterscheiden zu können, hier ein paar
hilfreiche Anhaltspunkte.

  

- eine Aktion auszuführen oder ein Event zu starten, ohne die Seite zu verlassen.
    - Formulare zu speichern oder zurückzusetzen.
    - in einem [Modal](/04-components/overlays/modal/overview) Aktionen auszuwählen.

  

- zu einer anderen Seite zu navigieren.
    - zu einem Anker zu 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](/04-components/structure/section/overview) 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](/04-components/actions/action-group/overview).
- 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.

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

<>
  <Button color="secondary">
    Speichern & weitere anlegen
  </Button>
  <Button color="accent">Anlegen</Button>
</>
```

  

**✅ Do**

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

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

<>
  <Button variant="soft" color="secondary">
    Zurück
  </Button>
  <Button>Weiter</Button>
</>
```

  

**✅ Do**

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

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

<>
  <Button variant="soft" color="secondary">
    Pausieren
  </Button>
  <Button color="secondary">Stoppen</Button>
  <Button>Starten</Button>
</>
```

  

**⛔️ Don't**

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

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

<>
  <Button color="secondary">Stoppen</Button>
  <Button variant="soft" color="secondary">
    Pausieren
  </Button>
  <Button>Starten</Button>
</>
```

## 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.

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

<>
  <Button>Weiter</Button>
  <Button size="s">Weiter</Button>
  <Button size="s">Weiter</Button>
</>
```

## Feedback

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

- Ein [Modal](/04-components/overlays/modal/overview) ö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](/04-components/actions/action/overview) 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.

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

<Button color="accent">Projekt anpassen</Button>
```

  

**⛔️ Don't**

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

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

<Button color="accent">
  Projekt und
  <br />
  Tarif anpassen
</Button>
```

  

**✅ Do**

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

```tsx
import {
  ActionGroup,
  Button,
  Heading,
  Text,
} from "@mittwald/flow-react-components";

<StaticModal>
  <header className="flow--modal--header">
    <Heading>
      Möchtest du die Bestellung wirklich verlassen?
    </Heading>
  </header>
  <div className="flow--modal--content">
    <Text>
      Bist du sicher, dass du die Bestellung wirklich
      verlassen möchtest? Deine eingegebenen Daten werden
      nicht gespeichert.
    </Text>
  </div>
  <ActionGroup className="flow--modal--action-group">
    <Button color="secondary" variant="soft">
      Bestellung fortsetzen
    </Button>
    <Button color="danger">Bestellung verlassen</Button>
  </ActionGroup>
</StaticModal>
```

  

**⛔️ Don't**

Verwirre den User nicht mit mehrdeutigen Begriffen.

```tsx
import {
  ActionGroup,
  Button,
  Heading,
  Text,
} from "@mittwald/flow-react-components";

<StaticModal>
  <header className="flow--modal--header">
    <Heading>
      Möchtest du die Bestellung wirklich verlassen?
    </Heading>
  </header>
  <div className="flow--modal--content">
    <Text>
      Bist du sicher, dass du die Bestellung wirklich
      verlassen möchtest? Deine eingegebenen Daten werden
      nicht gespeichert.
    </Text>
  </div>
  <ActionGroup className="flow--modal--action-group">
    <Button color="secondary" variant="soft">
      Abbrechen
    </Button>
    <Button color="danger">Verlassen</Button>
  </ActionGroup>
</StaticModal>
```

## Icon

Achte bei der Auswahl des Icons besonders darauf, dass die
[Icon-Component](/04-components/content/icon/overview) verwendet und ein
universell verständliches Icon gewählt wird.

  

**✅ Do**

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

```tsx
import {
  Button,
  IconFilter,
  IconSorting,
  TextField,
} from "@mittwald/flow-react-components";

<>
  <TextField value="Suche" aria-label="Suche" />
  <Button variant="plain" aria-label="Sortierung">
    <IconSorting />
  </Button>
  <Button variant="plain" aria-label="Filter">
    <IconFilter />
  </Button>
  <Button variant="outline" aria-label="Filter">
    <IconFilter />
  </Button>
</>
```

  

**⛔️ Don't**

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

```tsx
import {
  Button,
  Icon,
  TextField,
} from "@mittwald/flow-react-components";
import { IconCat, IconDog } from "@tabler/icons-react";

<>
  <TextField value="Suche" aria-label="Suche" />
  <Button variant="plain" aria-label="Katze">
    <Icon>
      <IconCat />
    </Icon>
  </Button>
  <Button variant="plain" aria-label="Hund">
    <Icon>
      <IconDog />
    </Icon>
  </Button>
  <Button variant="outline" aria-label="Hund">
    <Icon>
      <IconDog />
    </Icon>
  </Button>
</>
```

### 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.

```tsx
import {
  Button,
  ContextMenu,
  ContextMenuTrigger,
  Icon,
  IconChevronDown,
  IconEmail,
  MenuItem,
  Text,
} from "@mittwald/flow-react-components";
import { IconAt } from "@tabler/icons-react";

<ContextMenuTrigger>
  <Button color="accent">
    <Text>E-Mail-Addresse anlegen</Text>
    <IconChevronDown />
  </Button>
  <ContextMenu aria-label="E-Mail-Addresse anlegen">
    <MenuItem id="1">
      <Icon>
        <IconAt />
      </Icon>
      <Text>Weiterleitungsaddresse</Text>
    </MenuItem>
    <MenuItem id="2">
      <IconEmail />
      <Text>E-Mail-Adresse</Text>
    </MenuItem>
  </ContextMenu>
</ContextMenuTrigger>
```

---

# Behavior

## Responsive Layout

Buttons behalten auch auf schmaleren Bildschirmen ihre Breite, es sei denn, sie
befinden sich in der [Modal](/04-components/overlays/modal/overview)-Navigation.
Dort füllen sie die volle Breite des Contents an, wenn die Bildschirmbreite
kleiner als 400 px ist.

  

**✅ Do**

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.

```tsx
import {
  Button,
  HeaderNavigation,
  Heading,
  IconChevronDown,
  IconMenu,
  IconSearch,
  IconSupport,
  LayoutCard,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section style={{ height: "100%" }}>
  <HeaderNavigation
    aria-label="Header Navigation"
    color="dark"
    style={{ alignSelf: "flex-end" }}
  >
    <Button>
      <IconSearch />
    </Button>
    <Button>
      <IconSupport />
    </Button>
    <Button>
      <IconMenu />
    </Button>
  </HeaderNavigation>
  <Button color="dark" variant="outline">
    <Text>Aktionen</Text>
    <IconChevronDown />
  </Button>
  <LayoutCard style={{ width: "100%", flexGrow: "1" }}>
    <Heading>Projekte</Heading>
    <Text>...</Text>
  </LayoutCard>
</Section>
```

  

**✅ Do**

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.

```tsx
import {
  ActionGroup,
  Button,
  Heading,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<StaticModal>
  <header className="flow--modal--header">
    <Heading>Projekt anlegen</Heading>
  </header>
  <div className="flow--modal--content">
    <TextField>
      <Label>Projekt Name</Label>
    </TextField>
  </div>
  <ActionGroup className="flow--modal--action-group">
    <Button>Weiter</Button>
    <Button variant="soft" color="secondary">
      Abbrechen
    </Button>
  </ActionGroup>
</StaticModal>
```

---

## Accessibility

Achte beim Button darauf, dass ...

- ein [Tooltip](/04-components/overlays/tooltip/overview) 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.

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

<>
  <Button color="light">Light</Button>
  <Button variant="soft" color="light">
    Light
  </Button>
  <Button variant="outline" color="light">
    Light
  </Button>
  <Button variant="plain" color="light">
    Light
  </Button>
</>
```

  

**✅ 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.

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

<>
  <Button color="dark">Dark</Button>
  <Button variant="soft" color="dark">
    Dark
  </Button>
  <Button variant="outline" color="dark">
    Dark
  </Button>
  <Button variant="plain" color="dark">
    Dark
  </Button>
</>
```