[role="alert"]
Adding role="alert" to an element will stylize it as an alert message, for more examples on how you can combine this role with other attributes and elements to create different types of alerts, check out the Alerts composite documentation.
Accessibility: This role will make screen readers interrupt their current reading to announce the alert message, so it should be used only for critical messages like
We couldn't reserve your seat due to connection failure. Please check your internet connection., or time-sensitive information likeYour reserved seat will be released in 5 minutes..
For typical feedback messages, like Profile updated or Failed to save, please check for validation errors. the recommended role is role="status".
Basic Usage
Simply add role="alert" to any HTML element in combination with variant classes to create an inline alert message.
Note: Elements without content will be hidden, this way you can add the element to the DOM from the start and it will only be shown and announced when you update its content, without the need to worry about adding/removing it from the DOM.
<div class="danger" role="alert">
We couldn't reserve your seat due to connection failure.<br>Please check your internet connection.
</div>
<hr>
<div class="warning ghost" role="alert">
Your reserved seat will be released in 5 minutes.
</div>
<hr>
Alerts with empty content, stay hidden
<!-- edit the content to see it appear on the preview above -->
<div class="info subtle" role="alert"></div>Intent Variants
To convey intent and importance, alert messages can be styled with different variants:
Modifiers
.ghost creates transparent background alerts with colored text and borders, useful for secondary actions where you want minimal visual weight.
.subtle creates alerts with a more muted appearance, often used for less prominent notifications.