# AlertText

AlertText informiert über das Ergebnis einer Aktion, nah an der auslösenden Stelle.

```tsx
import { AlertText } from "@mittwald/flow-react-components";

<AlertText>Info</AlertText>
```

---

# Best Practices

- Wähle den Schweregrad passend zur Bedeutung der Meldung. Welcher Status wofür
  steht, beschreibt das
  [Informationskonzept](/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](/02-foundations/03-content-guidelines/03-fehlermeldungen).

---

# 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 { AlertText } from "@mittwald/flow-react-components";

<>
  <AlertText status="info">Info</AlertText>
  <AlertText status="warning">Warning</AlertText>
  <AlertText status="danger">Danger</AlertText>
  <AlertText status="success">Success</AlertText>
  <AlertText status="unavailable">Unavailable</AlertText>
</>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | - | The elements class name. |
| `children` | `ReactNode` | - | - |
| `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. |
| `ref` | `Ref<HTMLSpanElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see [React Docs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |
| `status` | `"info" \| "success" \| "warning" \| "danger" \| "unavailable"` | - | The elements status |