Verwende ein AlertBadge, wenn z. B. ...
- der Hinweis kritisch, sicherheitsrelevant oder besonders wichtig ist.
- weitere Informationen durch einen Alert notwendig sind.
AlertBadge
Archiviert
<AlertBadge>Archiviert</AlertBadge>
Best Practices
- Halte die Beschriftung kurz und prägnant, idealerweise auf ein bis drei Wörter.
- Wähle den Status passend zur Wichtigkeit der Meldung.
- Setze ein AlertBadge nur für kritische oder besonders aufmerksamkeitsstarke Hinweise ein. Für weniger dringende Fälle genügt ein Badge.
- Lass auf ein AlertBadge weiterführende Informationen in einem Alert folgen.
- Orientiere dich am Informationskonzept. Es beschreibt das Zusammenspiel der Status-Komponenten.
AlertBadge vs. Badge
Verwende ein Badge, wenn z. B. ...
- Metadaten oder ergänzende Informationen dargestellt werden sollen.
- keine sofortige Aktion oder erhöhte Aufmerksamkeit notwendig ist.
Status
Je nach Anwendungsfall stehen verschiedene Status-Farben zur Auswahl:
- Info – Allgemeine Systemzustände oder laufende Prozesse, die keine Aktion erfordern.
- Success – Abgeschlossene, erfolgreiche oder positiv bewertete Zustände.
- Warning – Hinweise auf mögliche Risiken mit einer klaren Handlungsempfehlung.
- Danger – Akute Fehlerzustände oder kritische Probleme, die sofortige Aufmerksamkeit erfordern.
- Unavailable – Zustände aufgrund von nicht verfügbaren oder gelöschten Inhalten.
ArchiviertUpdate erfolgreichSpeicher fast vollSpeicher vollNicht gefunden
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
Farben
| Token | Light | Dark |
|---|---|---|
--alert-badge--info-background-color | #e0e7f4 | #2e3552 |
--alert-badge--info-content-color | #4a568d | #aebae9 |
--alert-badge--info-border-color | #5d6cb4 | #95a3e3 |
--alert-badge--success-background-color | #dff6ec | #1c3f30 |
--alert-badge--success-content-color | #2f6950 | #9fe5c6 |
--alert-badge--success-border-color | #397f60 | #5ed3a0 |
--alert-badge--warning-background-color | #ffe2d8 | #5b3021 |
--alert-badge--warning-content-color | #a14c2c | #ffb79d |
--alert-badge--warning-border-color | #d05e33 | #ff9b76 |
--alert-badge--danger-background-color | #fcdae1 | #56232e |
--alert-badge--danger-content-color | #983146 | #f8a2b3 |
--alert-badge--danger-border-color | #c43b57 | #f57c94 |
--alert-badge--unavailable-background-color | #ebeff3 | #2c2f33 |
--alert-badge--unavailable-content-color | #404448 | #c1c7d0 |
--alert-badge--unavailable-border-color | #595e64 | #adb3bc |