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.
Archiviert
Update erfolgreich
Speicher fast voll
Speicher voll
Nicht 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 | #F0F5FF | #00205C |
--alert-badge--info-content-color | #003FB8 | #ABC6FF |
--alert-badge--info-border-color | #0054F5 | #85AFFF |
--alert-badge--success-background-color | #DCFFF4 | #00291C |
--alert-badge--success-content-color | #005F42 | #87FFDA |
--alert-badge--success-border-color | #00825B | #4FFFC9 |
--alert-badge--warning-background-color | #FFF4EB | #763200 |
--alert-badge--warning-content-color | #C25200 | #FFD9BD |
--alert-badge--warning-border-color | #F56800 | #FFC89F |
--alert-badge--danger-background-color | #FDF0F3 | #540B1B |
--alert-badge--danger-content-color | #AB1737 | #F7C1CC |
--alert-badge--danger-border-color | #E1244C | #F2A2B3 |
--alert-badge--unavailable-background-color | #E5EFF8 | #3A434E |
--alert-badge--unavailable-content-color | #3A434E | #E5EFF8 |
--alert-badge--unavailable-border-color | #3A434E | #E5EFF8 |