# Alert

Ein Alert macht den User auf eine wichtige Information aufmerksam. Er ist visuell hervorgehoben und sollte nur bei relevanten, nicht ignorierbaren Inhalten verwendet werden.

## Overview

# Playground

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

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

<Alert>
  <Heading>E-Mail-Adresse wurde archiviert</Heading>
</Alert>
```

---

# Mit Inhalt

Der Text eines Alerts sollte klar, prägnant und handlungsorientiert formuliert
sein. Er erklärt dem User, was passiert ist, warum es relevant ist und was als
Nächstes zu tun ist. Wenn möglich, biete dem User eine Möglichkeit, sein Problem
zu lösen – verwende dazu einen [Link](/04-components/navigation/link/overview)
oder [Button](/04-components/actions/button/overview). Eingefügte Buttons werden
automatisch in der Größe **Small** dargestellt, um ein ausgewogenes Verhältnis
im Gesamtbild zu gewährleisten.

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

<Alert>
  <Heading>E-Mail-Empfang wurde deaktiviert</Heading>
  <Content>
    Der Empfang der E-Mails für dieses Postfach ist aufgrund
    fehlerhafter MX-Records deaktiviert. Bitte setze die
    richtigen Mailserver. Bei einer Neuregistrierung einer
    Domain kann es einige Minuten dauern, bis die MX-Records
    global im DNS verfügbar sind. Die E-Mail-Adresse wird in
    diesem Fall automatisch aktiviert.
    <Button>MX-Records anpassen</Button>
  </Content>
</Alert>
```

---

# Status

Je nach Anwendungsfall stehen verschiedene Status-Farben zur Auswahl:

```tsx
import {
  Alert,
  Content,
  Heading,
} from "@mittwald/flow-react-components";

<>
  <Alert status="info">
    <Heading>E-Mail-Adresse wurde archiviert</Heading>
    <Content>
      Da deine Domain gelöscht wurde, wurde diese
      E-Mail-Adresse archiviert. Um E-Mails empfangen und
      senden zu können musst du die Adresse wieder
      umbenennen.
    </Content>
  </Alert>

  <Alert status="warning">
    <Heading>Dein Speicher ist fast voll</Heading>
    <Content>
      Dein Speicher ist zu über 80% belegt. Wir empfehlen
      dir deinen Speicherplatz zu erweitern, um Problemen
      vorzubeugen.
    </Content>
  </Alert>

  <Alert status="danger">
    <Heading>
      Es konnte kein SSL-Zertifikat ausgestellt werden
    </Heading>
    <Content>
      Für diese Domain konnte kein SSL-Zertifikat
      ausgestellt werden, da die Domain per IP nicht auf
      deine Server-IP zeigt.
    </Content>
  </Alert>

  <Alert status="success">
    <Heading>Deine App wurde aktualisiert</Heading>
    <Content>
      Deine App wurde erfolgreich auf die neueste Version
      aktualisiert.
    </Content>
  </Alert>

  <Alert status="unavailable">
    <Heading>Inhalte nicht gefunden</Heading>
    <Content>
      Die gewünschten Inhalte sind leider nicht verfügbar.
      Entweder wurden sie inzwischen gelöscht oder dir
      fehlen die notwendigen Berechtigungen.
    </Content>
  </Alert>
</>
```

**Info:** Allgemeine Systemzustände oder laufende Prozesse, die keine Aktion
erfordern.

**Warning:** Hinweise auf mögliche Risiken mit einer klaren Handlungsempfehlung.

**Danger:** Akute Fehlerzustände oder kritische Probleme, die sofortige
Aufmerksamkeit erfordern.

**Success:** Abgeschlossene, erfolgreiche oder positiv bewertete Zustände.

**Unavailable:** Zustände aufgrund von nicht verfügbaren oder gelöschten
Inhalten.