# Alert

Ein Alert macht den User visuell hervorgehoben auf wichtige, nicht ignorierbare Informationen aufmerksam.

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

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

---

# Best Practices

- Setze einen Alert nur ein, wenn der Inhalt eine hohe Aufmerksamkeit verlangt.
  Für rein informative Hinweise reicht oft ein unauffälligeres Element.
- Wähle den Schweregrad passend zur Bedeutung der Meldung. Welcher Status wofür
  steht, beschreibt das
  [Informationskonzept](https://flow.mittwald.de/02-foundations/03-content-guidelines/02-informationskonzept).
- Formuliere den Text klar, prägnant und lösungsorientiert. Verzichte auf
  Fachbegriffe und Schuldzuweisungen und beachte die
  [Content Guidelines für Fehlermeldungen](https://flow.mittwald.de/02-foundations/03-content-guidelines/03-fehlermeldungen).
- Biete nach Möglichkeit eine Handlungsmöglichkeit an. Zum Beispiel über einen
  [Button](https://flow.mittwald.de/04-components/actions/button) oder
  [Link](https://flow.mittwald.de/04-components/navigation/link).

## Alert vs. AccentBox

Alerts und [AccentBoxen](https://flow.mittwald.de/04-components/structure/accent-box) dienen beide dazu,
dem User zusätzliche Informationen bereitzustellen. Eine einfache Faustregel
hilft bei der Entscheidung: Kann die Information ignoriert werden, ohne negative
Folgen? Dann ist eine AccentBox die richtige Wahl. Wenn das Ignorieren hingegen
zu Problemen führen könnte – etwa bei sicherheitsrelevanten Hinweisen oder
wichtigen Systemmeldungen – sollte ein Alert mit entsprechendem Status verwendet
werden.

**Verwende Alerts, um z. B. ...**

- den User auf sicherheits- oder funktionsrelevante Informationen hinzuweisen.
- vor möglichen Problemen oder Systemzuständen zu warnen.
- dringende oder aktionsrelevante Statusmeldungen zu kommunizieren.

**Verwende AccentBoxen, um z. B. ...**

- ergänzende, aber nicht kritische Hinweise anzuzeigen.
- kontextuelle Informationen oder Tipps zu geben.
- visuell strukturierende Inhalte einzubetten, ohne zu unterbrechen.

---

# Mit Inhalt

Über den Content beschreibst du zuerst die Ursache – was ist passiert und welche
Folge ergibt sich – und anschließend, was der User tun kann. Wenn möglich, biete
ihm eine Möglichkeit, sein Problem zu lösen, über einen
[Link](https://flow.mittwald.de/04-components/navigation/link) oder einen
[Button](https://flow.mittwald.de/04-components/actions/button). Eingefügte Buttons werden automatisch
in der Größe **Small** dargestellt, um ein ausgewogenes 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:

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

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

---

# Position

Ein Alert sollte immer in unmittelbarem Zusammenhang mit dem betroffenen Inhalt
platziert werden.

## In einer Section

Bezieht sich der Alert auf eine bestimmte
[Section](https://flow.mittwald.de/04-components/structure/section), wird er in deren Content platziert.

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

<LayoutCard>
  <Section>
    <Heading>E-Mail-Adresse</Heading>
    <Text>...</Text>
  </Section>
  <Section>
    <Heading>Speicherplatz</Heading>
    <Alert status="danger">
      <Heading>Speicherplatz ist voll</Heading>
      <Text>
        Der Speicherplatz deines Postfachs ist voll. Um
        wieder E-Mails erhalten zu können, kannst du der
        E-Mail-Adresse mehr Speicher zuweisen.
      </Text>
    </Alert>
    <Text>...</Text>
  </Section>
</LayoutCard>
```

## Seitenweit

Gilt sein Hinweis für die gesamte Seite, wird er prominent oberhalb der ersten
Section innerhalb der [LayoutCard](https://flow.mittwald.de/04-components/structure/layout-card)
platziert.

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

<LayoutCard>
  <Alert status="danger">
    <Heading>E-Mail-Adresse wurde archiviert</Heading>
    <Text>
      Da deine Domain gelöscht wurde, wurde diese
      E-Mail-Adresse archiviert. Um E-Mails empfangen und
      senden zu können musst du die E-Mail-Adresse
      bearbeiten.
    </Text>
  </Alert>
  <Section>
    <Heading>E-Mail-Adresse</Heading>
    <Text>...</Text>
  </Section>
  <Section>
    <Heading>Speicherplatz</Heading>
    <Text>...</Text>
  </Section>
</LayoutCard>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | `"info" \| "success" \| "warning" \| "danger" \| "unavailable"` | - | The elements status |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |