FigmaOpenCode

Alert

Synonyme: Hinweis, Meldung, Warnung, Information, Mitteilung, Rückmeldung
Ähnliche Komponenten: Badge

Kurzbeschreibung

Ein Alert gibt einen Hinweis zu einer wichtigen Information mit knapper Erläuterung und optionalem Link.

Beispiele

• EFA Theme
• KERN Theme

Loading...

<div class="component-col">
	<KernHeading class="variant-label" _level="3" _label="Alerts"></KernHeading>
	<KernAlert _type="info" _variant="msg" _label="Hinweis" _level="4"></KernAlert>
	<KernAlert _type="success" _variant="msg" _label="Erfolg" _level="5"></KernAlert>
	<KernAlert _type="warning" _variant="msg" _label="Warnung" _level="6"></KernAlert>
	<KernAlert _type="error" _variant="msg" _label="Fehler" _level="3"></KernAlert>
</div>

<div class="component-col">
	<KernHeading class="variant-label" _level="3" _label="Alert Cards"></KernHeading>
	<KernAlert _type="info" _variant="card" _label="Hinweis" _level="4">Hier wird der Hinweis näher beschrieben.</KernAlert>
	<KernAlert _type="success" _variant="card" _label="Erfolg" _level="5">Hier wird der Erfolg näher beschrieben.</KernAlert>
	<KernAlert _type="warning" _variant="card" _label="Warnung" _level="6">Hier wird die Warnung näher beschrieben.</KernAlert>
	<KernAlert _type="error" _variant="card" _label="Fehler" _level="3">Hier wird der Fehler näher beschrieben.</KernAlert>
	<KernAlert _type="info" _label="Alert mit HTML Content" _variant="card">
		<ul>
			<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
			<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
			<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
		</ul>
	</KernAlert>
</div>

Beschreibung

Ein Alert gibt einen knapp formulierten Hinweis auf wichtige Informationen oder Veränderungen. Er besteht aus Kopf- und Inhaltsbereich. Der Kopf enthält ein Icon und einen beschreibenden Titel. Der Inhalt ist optional und enthält einen knappen Beschreibungstext. Ebenfalls optional kann unter dem Beschreibungstext auch ein Link zu weiteren Informationen oder zugehörigen Aktionen angezeigt werden.
Es gibt vier Zustände, die farblich fest kodiert sind: Info (blau), Success (grün), Warning (gelb) und Danger (rot). Mehr dazu findest Du unten bei den Verwendungsregeln.

Effektiver Einsatz

Um die Benutzerfreundlichkeit und Effektivität von Alerts zu gewährleisten, sollten folgende Punkte beachtet werden:

• Klarheit und Prägnanz: Die Botschaft des Alerts sollte klar und unmissverständlich sein.
• Relevanz: Alerts sollten nur dann angezeigt werden, wenn sie für die Nutzenden relevant sind.
• Dringlichkeit: Die Dringlichkeit des Alerts sollte durch visuelle und akustische Signale angemessen kommuniziert werden.
• Interaktivität: Alerts sollten Nutzenden die Möglichkeit bieten, direkt auf die Nachricht zu reagieren.

Verwendungsregeln

Information, blau

Eine Meldung über unkritische Informationen oder Zustände, die keinen unmittelbaren Handlungsbedarf auf Nutzendenseite erfordern.
Beispiel:

• „Vorbildlich – Ihre Daten sind aktuell.“

Erfolgreich, grün

Eine Meldung über eine erfolgreich oder in der vorgesehenen Art ausgeführte Aktion.
Beispiele:

• „Ihre Daten wurden vollständig eingegeben.“
• „Ihrem Antrag wurde zugestimmt.“

Warnung, gelb

Eine Meldung, die die Aufmerksamkeit des Nutzenden erreichen soll, aber unkritisch ist. Im Inhaltsbereich kannst du den Grund knapp benennen und auf weiterführende Informationen oder Aktionen verlinken. Gib auch stets an, ob eine bzw. welche Aktion des Nutzenden erforderlich oder nicht erforderlich ist.
Beispiele:

• wenn mit einer unüblich langen Bearbeitungszeit zu rechnen ist
• wenn noch eine Prüfung der vorher eingegebenen Daten stattfindet: „Ihre Daten werden noch geprüft. Das Ergebnis erhalten Sie in den nächsten 24 Stunden per E-Mail.“

Fehler, rot

Eine Meldung, die einen kritischen Zustand signalisiert, die die Weiterarbeit verhindert. Das kann zum Einen ein Fehler des Systems sein, der zum Abbruch eines Prozesses führt. Ein zweites Beispiel kan sein, dass eine Aktion des Nutzenden unbedingt erforderlich ist. Benenne die erforderliche Aktion oder verlinke auf eine detaillierte Darstellung weiterer Handlungsoptionen.
Beispiele:

1. „Der Server antwortet nicht, die Daten können nicht übertragen werden.“
2. „Ihre Daten sind leider nicht vollständig. Der Antrag kann daher noch nicht bearbeitet werden. Bitte ergänzen Sie die fehlenden Angaben.“

Dos und Don’ts

Gehe sparsam mit Alerts um. Informationen können auch in einem Textabsatz beschrieben werden.

Beschreibe den Grund für den Alert in einer knappen und präzisen Erläuterung.

Ist eine Aktion der Nutzenden erforderlich, so benenne und/oder verlinke diese Aktion.

Lass Nutzende nicht mit einer Meldung allein, sondern weise Lösungen auf.

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße und Kontrastverhältnis – für barrierefreie Dienste.

• Achte in der angewandten Nutzung darauf, dass Titel und Beschreibungstext auch für Laien und insbesondere Menschen mit kognitiven Beeinträchtigungen verständlich sind. In Zweifelsfällen solltest du eine eigene Version in „Einfacher Sprache“ und/oder „Leichter Sprache“ in Erwägung ziehen.

Siehe auch: w3.org - Alert Pattern, w3.org - Alert and Message Dialogs Pattern oder magentaA11y

kern-alert

Properties

Property	Attribute	Description	Type	Default
_alert	_alert	Defines whether the screen-readers should read out the notification.	boolean | undefined	false
_customClass	_custom-class	Gibt die Möglichkeit, eine eigene CSS Klasse zu ergänzen.	string | undefined	undefined
_hasCloser	_has-closer	Defines whether the element can be closed.	boolean | undefined	false
_label (required)	_label	Gibt den Text des Alerts an.	string	undefined
_level	_level	Gibt die Wertigkeit der Alert Überschrift an.	1 | 2 | 3 | 4 | 5 | 6 | undefined	5
_on	--	Gibt die EventCallback-Function für das Schließen des Alerts an.	undefined | { onClose?: EventCallback<Event> | undefined; }	undefined
_type	_type	Gibt den Typ des Alerts an.	"error" | "form-error" | "info" | "primary" | "secondary" | "success" | "warning" | undefined	'success'
_variant	_variant	Gibt die Variante des Alerts an.	"card" | "msg" | undefined	'msg'

---