Alert
Synonyme: Message, Hinweis, Benachrichtigung
Beschreibung: Die Alert-Komponente gibt Feedback an die Nutzer:innen. Sie besteht aus einem Container, einer Überschrift, einem Inhaltstext und einem Icon, das den Typ der Nachricht signalisiert.
Beispiel
Standard-Alert mit Typ, Variante und Inhalt:
<KolAlert _alert={false} _hasCloser={false} _label="Hinweis" _level={3} _type="info" _variant="msg" >Dies ist eine <strong>Beispielmeldung</strong> mit weiteren Details.</KolAlert>Barrierefreiheit
- Das Icon (abhängig vom gewählten Typ) gewährleistet, dass Informationen nicht ausschließlich über die Farbe wahrgenommen werden müssen.
- Bei der Nutzung von Screenreadern wird das Icon immer mitgelesen. Der Titel sollte daher nicht mit dem Alert-Typ beginnen, da dies zu einem doppelten Vorlesen führt.
- Richtig: Label = „Füllen Sie das Feld aus." → Ausgabe: „Fehler – Füllen Sie das Feld aus."
- Falsch: Label = „Fehler: Füllen Sie das Feld aus." → Ausgabe: „Fehler – Fehler: Füllen Sie das Feld aus."
- Das Attribut
_alertaktiviert Screenreader-Benachrichtigungen (role="alert"/aria-live="assertive"). Es wirkt nur beim initialen Rendern der Komponente oder bei einer Inhaltsänderung.
Links und Referenzen
Verwendung
Best Practices / Empfehlungen
- Verwenden Sie immer den zum Inhalt passenden Typ (
_type):success,error,infooderwarning. - Verwenden Sie Alert an geeigneten Stellen auf der Seite, um Informationen im richtigen Kontext darzustellen.
- Platzieren Sie nicht zu viele Alert-Komponenten auf einer Seite, da der Informationsgehalt sonst an Wichtigkeit verliert.
- Der Titel (Label) sollte nicht mit dem Alert-Typ beginnen, um doppeltes Vorlesen durch Screenreader zu vermeiden.
- Nutzen Sie
_alertnur für dynamisch eingefügte oder geänderte Benachrichtigungen – statische Alerts werden von Screenreadern beim initialen Laden nicht automatisch vorgelesen.
Anwendungsfälle
- Hinweis auf Fehler bei der Formulareingabe
- Bestätigung einer erfolgreichen Aktion (z.B. „Ihre Anfrage wurde erfolgreich gespeichert")
- Allgemeiner Informationshinweis zu einem Thema oder einer Funktion
- Warnmeldungen bei kritischen Aktionen
Playground
<KolAlert _alert={false} _hasCloser={false} _label="Hinweis" _level={3} _type="info" _variant="msg" >Dies ist eine <strong>Beispielmeldung</strong> mit weiteren Details.</KolAlert>Funktionalitäten
Typ des Alert
Der Typ des Alert wird über das Attribut _type festgelegt und bestimmt die semantische Bedeutung sowie das verwendete Icon.
<KolAlert _alert={false} _hasCloser={false} _label="Hinweis" _level={3} _type="info" _variant="msg" >Dies ist eine <strong>Beispielmeldung</strong> mit weiteren Details.</KolAlert>| Typ | Bedeutung |
|---|---|
default | Neutral, ohne spezifische semantische Bedeutung |
success | Erfolgreiche Aktion |
error | Fehler oder kritisches Problem |
info | Allgemeiner Hinweis |
warning | Warnung, Vorsicht geboten |
Variante des Alert
Über das Attribut _variant wird die Darstellungsvariante gesteuert.
<KolAlert _alert={false} _hasCloser={false} _label="Hinweis" _level={3} _type="info" _variant="msg" >Dies ist eine <strong>Beispielmeldung</strong> mit weiteren Details.</KolAlert>| Variante | Beschreibung |
|---|---|
msg | Die linke Spalte mit Icon erstreckt sich über die gesamte Höhe des Alerts. |
card | Die linke Spalte mit Icon befindet sich nur neben der Überschrift. |
Überschrift und Überschriftenebene
Die Überschrift wird über _label festgelegt, die semantische Ebene über _level (1–6, oder 0 für Fettschrift ohne semantisches Heading).
<KolAlert _alert={false} _hasCloser={false} _label="Überschrift" _level={3} _type="info" _variant="msg" >Dies ist eine <strong>Beispielmeldung</strong> mit weiteren Details.</KolAlert>Inhalt des Alert
Der Inhalt des Alert wird als Slot-Inhalt übergeben und kann beliebigen HTML-Code oder KoliBri-Komponenten enthalten.
<KolAlert _alert={false} _hasCloser={false} _label="Hinweis" _level={3} _type="info" _variant="msg" >Dies ist eine <strong>Beispielmeldung</strong> mit weiteren Details.</KolAlert>Schließen-Funktion
Mit dem Attribut _has-closer wird ein Schließen-Button eingeblendet.
<KolAlert _alert={false} _hasCloser={true} _label="Schließbarer Alert" _level={3} _type="info" _variant="msg" >Dies ist eine <strong>Beispielmeldung</strong> mit weiteren Details.</KolAlert>Screenreader-Benachrichtigungen (_alert)
Das Attribut _alert aktiviert role="alert" bzw. aria-live="assertive", sodass Screenreader die Benachrichtigung automatisch vorlesen. Es wirkt nur beim initialen Rendern der Komponente oder bei einer Inhaltsänderung.
<KolAlert _alert={true} _hasCloser={false} _label="Statusmeldung" _level={3} _type="info" _variant="msg" >Dies ist eine <strong>Beispielmeldung</strong> mit weiteren Details.</KolAlert>Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
close | Komponente wird geschlossen | - |
API
Overview
The Alert component provides visual feedback to users. It consists of a color-coded container, a heading, content text, and an icon. The icon used and the color scheme depend on the _type of the alert.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_alert | _alert | Defines whether the screen-readers should read out the notification. | boolean | undefined | false |
_hasCloser | _has-closer | Defines whether the element can be closed. | boolean | undefined | false |
_label | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined | undefined |
_level | _level | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 0 |
_on | -- | Gibt die EventCallback-Function für das Schließen des Alerts an. | undefined | { onClose?: EventCallback<Event> | undefined; } | undefined |
_type | _type | Defines either the type of the component or of the components interactive element. | "default" | "error" | "info" | "success" | "warning" | undefined | 'default' |
_variant | _variant | Defines which variant should be used for presentation. | "card" | "msg" | undefined | 'msg' |
Slots
| Slot | Description |
|---|---|
| The content of the notification. |