💠 Alert

Displays a callout for user attention.

Usage

The alert component is designed to capture user attention quickly and deliver important information or feedback. The message within the alert should be concise and, if an action is required, it should provide clear guidance on what the user needs to do next.

Alerts are typically used to inform users about a situation or a change in status that requires their immediate attention.

When to use

• To convey urgent information: Use alerts to inform users of urgent and potentially disruptive issues that require immediate attention, such as error messages or warnings.
• To disclose important changes: If there's a significant change to the system or to the user's account, such as a system outage or a security breach, use an alert to ensure that the user is aware of the change.

Avoid overusing alerts for information that is not crucial or does not require immediate action, as this can lead to alert fatigue and reduce the effectiveness of the alerts.

Examples

Default

Brand

Danger

Warning

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Thanks to the native WAI-ARIA (opens in a new tab) alert role the screen reader will be interrupted, announcing the new content immediately.