Alert

This documentation is currently being revised and is in beta status. Content may still change.

This component is being retested for accessibility. The full test is still pending and can only be completed after a release.

Synonyms: Message, Notice, Notification

Description: The Alert component provides feedback to users. It consists of a container, a heading, content text and an icon that signals the type of message.

Example

Standard alert with type, variant and content:

This is an example message with additional details.

Type

Variant

<KolAlert _alert={false} _hasCloser={false} _label="Notice" _level={3} _type="info" _variant="msg" >This is an <strong>example message</strong> with additional details.</KolAlert>

Accessibility

• The icon (depending on the selected type) ensures that information does not have to be perceived by color alone.
• When using screen readers, the icon is always read aloud. The title should therefore not begin with the alert type, as this leads to the alert type being read twice.
  • Correct: Label = "Fill in the field." → Output: "Error – Fill in the field."
  • Incorrect: Label = "Error: Fill in the field." → Output: "Error – Error: Fill in the field."
• The _alert attribute enables screen reader notifications (role="alert" / aria-live="assertive"). It only works on initial render or when content changes.

Links and References

Usage

Best Practices / Recommendations

• Always use the type (_type) matching the content: success, error, info or warning.
• Use Alert in appropriate locations on the page to present information in the correct context.
• Avoid placing too many Alert components on one page, as the information will lose its perceived importance.
• The title (label) should not begin with the alert type to avoid double reading by screen readers.
• Use _alert only for dynamically inserted or changed notifications – statically present alerts are not automatically read by screen readers on initial load.

Use Cases

• Indicating errors in form input
• Confirming a successful action (e.g. "Your request has been successfully saved")
• General informational notice about a topic or feature
• Warning messages for critical actions

Construction / Technical

Playground

This is an example message with additional details.

Type

Variant

<KolAlert _alert={false} _hasCloser={false} _label="Notice" _level={3} _type="info" _variant="msg" >This is an <strong>example message</strong> with additional details.</KolAlert>

Functionalities (with Code)

Type of Alert

The type of the alert is set via the _type attribute and determines the semantic meaning and the icon used.

This is an example message with additional details.

Type

<KolAlert _alert={false} _hasCloser={false} _label="Notice" _level={3} _type="info" _variant="msg" >This is an <strong>example message</strong> with additional details.</KolAlert>

Type	Meaning
default	Neutral, without specific semantic meaning
success	Successful action
error	Error or critical issue
info	General notice
warning	Warning, caution required

Variant of the Alert

The _variant attribute controls the display variant.

This is an example message with additional details.

Variant

<KolAlert _alert={false} _hasCloser={false} _label="Notice" _level={3} _type="info" _variant="msg" >This is an <strong>example message</strong> with additional details.</KolAlert>

Variant	Description
msg	The left column with icon extends over the entire height of the alert.
card	The left column with icon is only placed next to the heading.

Heading and Heading Level

The heading is set via _label, the semantic level via _level (1–6, or 0 for bold text without a semantic heading element).

This is an example message with additional details.

<KolAlert _alert={false} _hasCloser={false} _label="Heading" _level={3} _type="info" _variant="msg" >This is an <strong>example message</strong> with additional details.</KolAlert>

Content of the Alert

The content of the alert is passed as slot content and can contain any HTML code or KoliBri components.

This is an example message with additional details.

<KolAlert _alert={false} _hasCloser={false} _label="Notice" _level={3} _type="info" _variant="msg" >This is an <strong>example message</strong> with additional details.</KolAlert>

Close Function

The _has-closer attribute shows a close button.

This is an example message with additional details.

<KolAlert _alert={false} _hasCloser={true} _label="Closable Alert" _level={3} _type="info" _variant="msg" >This is an <strong>example message</strong> with additional details.</KolAlert>

Screen Reader Notifications (_alert)

The _alert attribute activates role="alert" or aria-live="assertive", so that screen readers automatically read the notification. It only works on initial render or when content changes.

This is an example message with additional details.

<KolAlert _alert={true} _hasCloser={false} _label="Status Message" _level={3} _type="info" _variant="msg" >This is an <strong>example message</strong> with additional details.</KolAlert>

Events

For handling events or callbacks, see .

Event	Trigger	Value
close	Component is being closed	-

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.

---