Navigation

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

Alerts come in five semantic variants for different message types.

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

Add data-filled for a solid background color.

Alerts can be simple single-line messages without title.

Add a dismiss button for closable alerts.

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