# Notification

Die Notification informiert die User über wichtige System- oder Statusmeldungen. Sie sollte sparsam eingesetzt werden, um die Aufmerksamkeit des Users zu erhalten.

## Overview

# Playground

Verwende `<Notification />`, um eine Notification darzustellen. Um eine
Notification auszulösen und sie zu steuern, kann der
[NotificationProvider](/04-components/status/notification-provider/overview)
genutzt werden.

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

<Notification>
  <Heading>E-Mail-Adresse archiviert</Heading>
  <Text>
    Die E-Mail-Adresse <strong>example@mittwald.de</strong>{" "}
    wurde archiviert.
  </Text>
</Notification>
```

---

# Status

Je nach Anwendungsfall stehen verschiedene Status-Farben zur Auswahl:

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

<>
  <Notification status="info">
    <Heading>E-Mail-Adresse archiviert</Heading>
    <Text>
      Die E-Mail-Adresse{" "}
      <strong>example@mittwald.de</strong> wurde archiviert.
    </Text>
  </Notification>

  <Notification status="warning">
    <Heading>Speicher fast voll</Heading>
    <Text>
      Der Speicherplatz im Projekt{" "}
      <strong>My Project</strong> ist zu 80% voll.
    </Text>
  </Notification>

  <Notification status="danger">
    <Heading>Kein SSL-Zertifikat</Heading>
    <Text>
      Für <strong>example.de</strong> konnte kein
      SSL-Zertifikat ausgestellt werden.
    </Text>
  </Notification>

  <Notification status="success">
    <Heading>App installiert</Heading>
    <Text>
      Deine App <strong>My WordPress</strong> wurde
      erfolgreich installiert.
    </Text>
  </Notification>

  <Notification status="unavailable">
    <Heading>Nicht gefunden</Heading>
    <Text>
      Die gewünschten Inhalte sind leider nicht verfügbar.
    </Text>
  </Notification>
</>
```

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