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

## 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>
</>
```