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