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.

Information
This is an informational message with helpful details.
Success
Your changes have been saved successfully.
Warning
Please review your information before proceeding.
Error
There was a problem processing your request.
Note
This is a neutral message for general notices.

Code

<status-message data-variant="success"> <div data-content> <div data-title>Success</div> <div data-description>Your changes have been saved.</div> </div> </status-message>

With Icons

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

Information
This message includes an icon for visual clarity.
Success
Your changes have been saved successfully.
Warning
Please review your information before proceeding.
Error
There was a problem processing your request.

Code

<status-message data-variant="success"> <icon-wc name="circle-check" data-icon></icon-wc> <div data-content> <div data-title>Success</div> <div data-description>Your changes have been saved.</div> </div> </status-message>

Filled Style

Add data-filled for a solid background color.

Filled Info
A more prominent informational alert.
Filled Error
A critical error that needs attention.

Code

<status-message data-variant="error" data-filled> <div data-content> <div data-title>Critical Error</div> <div data-description>Immediate action required.</div> </div> </status-message>

Simple Alerts

Alerts can be simple single-line messages without title.

Your session will expire in 5 minutes.
File uploaded successfully!

Code

<status-message data-variant="success" data-compact> <div data-content>File uploaded successfully!</div> </status-message>

With Dismiss Button

Add a dismiss button for closable alerts.

Dismissable Alert
Click the X to dismiss this alert.

Code

<status-message data-variant="info"> <div data-content> <div data-title>Dismissable Alert</div> <div data-description>Click the X to dismiss.</div> </div> <button data-dismiss type="button" aria-label="Dismiss">&#x2715;</button> </status-message>

Accessibility

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

<!-- For error messages --> <status-message data-variant="error" role="alert"> ... </status-message> <!-- For status updates --> <status-message data-variant="success" role="status"> ... </status-message>

Related Elements