status-message

Inline notification banners for important messages. Use for success confirmations, warnings, errors, and informational notices.

Attributes

Attribute Values Default Description
data-variant info, success, warning, error, neutral info Alert type and color
data-filled boolean - Use solid background color
data-compact boolean - Reduce padding

Variants

Alerts come in five semantic variants for different message types.

With Icons

Add an icon-wc element with data-icon attribute for visual emphasis.

Filled Style

Add data-filled for a solid background color.

Simple Alerts

Alerts can be simple single-line messages without title.

With Dismiss Button

Add a dismiss button for closable alerts.

Accessibility

For important alerts that need to be announced to screen readers, add the appropriate ARIA role.

Related
↑