Alert

• When you want to interrupt a user’s journey with relevant information.
• For things like status messages and additional explanations.

• When there are already many on the screen. Don’t overwhelm the user.
• For messages that shouldn’t interrupt the flow—consider heading and text.
• For temporary messages that don’t draw much attention—use a toast.
• When no results match a user query—use an empty state.
• When a user has to solve an issue as soon as possible—use a modal.

To maximize accessibility, make sure the message is clear from the content. Icons can also support the message.

Color alone doesn't always distinguish different alert types.

There are times when just simple information isn’t enough and the user needs to take additional steps to resolve the problem or get additional details.

In such cases, provide additional actions for your message. Alerts use special status buttons to match the button color with the alert color.

Use at most two actions in each Alert: one primary and one subtle. See more on the styles of the actions and how they should be aligned.

Explain why the user was interrupted—confirm the action that will happen or describe what just has happened.

Keep it clear, short, and simple. Alerts break the user flow, so you want to explain why with as few details as possible.

For longer messages, use a title for quick info. The user sees the title first when scanning the message. You can also provide additional context for the alert by adding a description. For more complex messages, let users access more information through an action button.

There are four types of alerts: informational, success, warning, and critical.

Informational alerts are the most common alerts. Use them to guide a user’s attention to relevant details, but keep it focused and related to the topic on the screen.

Consider tailoring your icons to your message. Baggage, clocks, or other symbols strengthen the informative nature of your message.

Success alerts confirm that an instruction from the user, such as to make a payment or request a refund, was processed successfully. Usually used without an action button.

Avoid using success alerts when there is a follow-up action, such as when users need to confirm something by e-mail. For such actions, use an informational alert instead.

Use warning alerts when you need to inform users about a potentially unfavorable situation that requires eventual action from them. If the issue requires immediate attention, use a critical alert.

Use critical alerts when something is blocking users from continuing or an issue needs to be resolved immediately. The alert should offer a solution to the problem.

A critical alert should provide some form of solution for their problem. If something is important for users to solve as soon as possible, it’s worth considering automatically opening a modal.

The alert’s content should be the same on all platforms, but there’s more space to play with on the desktop. That’s why the desktop versions have larger fonts, icons, and inner padding.

For native or responsive views, the design is much more compact to avoid filling the screen with the message.

Alert components have a visual hierarchy where the title is the most significant element. The title’s darker color emphasizes it against the description. It’s a minor adjustment that doesn’t stand out to the user.

In React, we also force the colors of child components to match the alert type. You can freely use Text, Heading, List, and TextLink components, and the colors of these components will be automatically adjusted.