💠 Alert

Displays a callout for user attention.

Notice

This is a general notification for your attention. It provides neutral information or basic reminders for everyday tasks.

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

Notice

This is a general notification for your attention. It provides neutral information or basic reminders for everyday tasks.

Brand

Did you know?

Here's some useful information or context about the current process or section that might be helpful to you.

Danger

Error Detected!

Critical issue encountered! Please address this error immediately to prevent system failure or data loss.

Warning

Caution Advised

Be cautious! There are certain risks associated with this action. Review and proceed with care.

Useful links

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

🤖 Storybook 🪄 Figma

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.

💠 Accordion 💠 Alert Dialog