# AlertText

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

## Overview

# Playground

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

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

<AlertText>Info</AlertText>
```

---

# Status

Je nach Anwendungsfall stehen verschiedene Status-Farben zur Auswahl:

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

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


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | - | The elements class name. |
| `children` | `ReactNode` | - | - |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | - |
| `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 |


## Guidelines

# Grundlagen

## Best Practices

Achte bei der Verwendung eines AlertTexts darauf, dass ...

- der Schweregrad sinnvoll gewählt ist – `danger` für sofortigen
  Handlungsbedarf, `warning` für Handlungsbedarf, `info` für eine wichtige
  Information, `success` für einen Erfolg und `unavailable` für nicht verfügbar.
- der Text klar, prägnant und lösungsorientiert formuliert ist. Vermeide
  technische Fachbegriffe oder Schuldzuweisungen. Beachte die Content-Guidelines
  für
  [Fehlermeldungen](/02-foundations/03-content-guidelines/03-fehlermeldungen).

## Verwendung

Verwende einen AlertText, um zusätzliche wichtige Informationen oder Hinweise in
einem bestimmten Kontext bereitzustellen.