AlertText
Info
<AlertText>Info</AlertText>
Best Practices
- Wähle den Schweregrad passend zur Bedeutung der Meldung. Welcher Status wofür steht, beschreibt das Informationskonzept.
- Formuliere den Text klar, prägnant und lösungsorientiert. Verzichte auf Fachbegriffe und Schuldzuweisungen und beachte die Content Guidelines für 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.
InfoWarningDangerSuccessUnavailable
Properties
| Property | Type | Description |
|---|---|---|
children | ReactNode | |
className | string | The elements class name. |
status | info | success | warning | danger | unavailable | The elements status |
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. `null` takes a wrapper a surrounding props context set back off, the way `tunnel: null` does for a tunnel. |
Design Tokens
Größen & Stile
| Token | Wert |
|---|---|
--alert-text--spacing | 0.25rem |
Farben
| Token | Light | Dark |
|---|---|---|
--alert-text--info-color | #003FB8 | #ABC6FF |
--alert-text--warning-color | #C25200 | #FFD9BD |
--alert-text--danger-color | #AB1737 | #F7C1CC |
--alert-text--success-color | #005F42 | #87FFDA |
--alert-text--unavailable-color | #3A434E | #E5EFF8 |