Verwende Alerts, um z. B. ...
- den User auf sicherheits- oder funktionsrelevante Informationen hinzuweisen.
- vor möglichen Problemen oder Systemzuständen zu warnen.
- dringende oder aktionsrelevante Statusmeldungen zu kommunizieren.
Alert
<Alert> <Heading>E-Mail-Adresse wurde archiviert</Heading> </Alert>
Best Practices
- Setze einen Alert nur ein, wenn der Inhalt eine hohe Aufmerksamkeit verlangt. Für rein informative Hinweise reicht oft ein unauffälligeres Element.
- 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.
- Biete nach Möglichkeit eine Handlungsmöglichkeit an. Zum Beispiel über einen Button oder Link.
Alert vs. AccentBox
Alerts und AccentBoxen dienen beide dazu, dem User zusätzliche Informationen bereitzustellen. Eine einfache Faustregel hilft bei der Entscheidung: Kann die Information ignoriert werden, ohne negative Folgen? Dann ist eine AccentBox die richtige Wahl. Wenn das Ignorieren hingegen zu Problemen führen könnte – etwa bei sicherheitsrelevanten Hinweisen oder wichtigen Systemmeldungen – sollte ein Alert mit entsprechendem Status verwendet werden.
Verwende AccentBoxen, um z. B. ...
- ergänzende, aber nicht kritische Hinweise anzuzeigen.
- kontextuelle Informationen oder Tipps zu geben.
- visuell strukturierende Inhalte einzubetten, ohne zu unterbrechen.
Mit Inhalt
Über den Content beschreibst du zuerst die Ursache – was ist passiert und welche Folge ergibt sich – und anschließend, was der User tun kann. Wenn möglich, biete ihm eine Möglichkeit, sein Problem zu lösen, über einen Link oder einen Button. Eingefügte Buttons werden automatisch in der Größe Small dargestellt, um ein ausgewogenes Gesamtbild zu gewährleisten.
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.
Position
Ein Alert sollte immer in unmittelbarem Zusammenhang mit dem betroffenen Inhalt platziert werden.
In einer Section
Bezieht sich der Alert auf eine bestimmte Section, wird er in deren Content platziert.
E-Mail-Adresse
...Speicherplatz
...Seitenweit
Gilt sein Hinweis für die gesamte Seite, wird er prominent oberhalb der ersten Section innerhalb der LayoutCard platziert.
E-Mail-Adresse
...Speicherplatz
...Properties
| Property | Type | Description |
|---|---|---|
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. |
Accessibility
| Property | Type | Description |
|---|---|---|
aria-describedby | string | Identifies the element (or elements) that describes the object. @see aria-labelledby |
aria-hidden | Booleanish | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
aria-label | string | Defines a string value that labels the current element. @see aria-labelledby. |
aria-labelledby | string | Identifies the element (or elements) that labels the current element. @see aria-describedby. |
Design Tokens
Größen & Stile
| Token | Wert |
|---|---|
--alert--padding | 16px |
--alert--corner-radius | 8px |
--alert--border-width | 1px |
--alert--border-x-start-width | 8px |
--alert--border-style | solid |
--alert--heading-to-content-spacing | 0.5rem |
--alert--spacing | 1rem |
--alert--heading-size | 1rem |
Farben
| Token | Light | Dark |
|---|---|---|
--alert--info-border-color | #0054F5 | #85AFFF |
--alert--info-heading-color | #003FB8 | #ABC6FF |
--alert--warning-border-color | #F56800 | #FFC89F |
--alert--warning-heading-color | #C25200 | #FFD9BD |
--alert--danger-border-color | #E1244C | #F2A2B3 |
--alert--danger-heading-color | #AB1737 | #F7C1CC |
--alert--success-border-color | #00825B | #4FFFC9 |
--alert--success-heading-color | #005F42 | #87FFDA |
--alert--unavailable-border-color | #3A434E | #E5EFF8 |
--alert--unavailable-heading-color | #3A434E | #E5EFF8 |