# Notification

Die Notification informiert User über wichtige System- oder Statusmeldungen.

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

---

# Best Practices

- Kommuniziere nur relevante und wichtige Informationen. Das vermeidet eine
  Informationsüberlastung.
- Formuliere die Meldung kurz, klar und verständlich, als Faustregel in
  höchstens zwölf Wörtern.
- Halte Notifications gesammelt und später abrufbar.

---

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

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `autoClose` | `boolean` | - | Whether the notification should disappear automatically after some time. |
| `href` | `string` | - | A link that is triggered when clicking the notification. |
| `status` | `"info" \| "success" \| "warning" \| "danger" \| "unavailable"` | - | The elements status |

### Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `(() => void)` | - | Handler that is called when the notification is clicked. |
| `onClose` | `(() => void)` | - | Handler that is called when the close button of the notification is clicked. |

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