# AlertText

AlertText informiert den User über das Ergebnis einer ihrer Aktionen. Im Gegensatz zu Alert kann eine AlertText sehr nah an der Stelle platziert werden, an der die Aktion stattgefunden hat

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