Alert

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

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:

Dies ist eine Beispielmeldung mit weiteren Details.

Type

Variant

<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 _alert aktiviert 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, info oder warning.
• 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 _alert nur 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

Konstruktion / Technik

Playground

Dies ist eine Beispielmeldung mit weiteren Details.

Type

Variant

<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 (mit Code)

Typ des Alert

Der Typ des Alert wird über das Attribut _type festgelegt und bestimmt die semantische Bedeutung sowie das verwendete Icon.

Dies ist eine Beispielmeldung mit weiteren Details.

Type

<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.

Dies ist eine Beispielmeldung mit weiteren Details.

Variant

<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).

Dies ist eine Beispielmeldung mit weiteren Details.

<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.

Dies ist eine Beispielmeldung mit weiteren Details.

<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.

Dies ist eine Beispielmeldung mit weiteren Details.

<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.

Dies ist eine Beispielmeldung mit weiteren Details.

<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.

---