Alert

Communicates the urgency of a message and is denoted by various styling configurations.

• neutral - Indicates generic information or a message with no severity.
• danger - Indicates a danger state, like an error that is blocking a user from completing a task.
• warning - Indicates a warning state, like a non-blocking error that might need to be fixed.
• caution - Indicates an action or notice which should immediately draw the attention
• info - Indicates helpful information or a message with very little to no severity.
• success - Indicates a success state, like if a process was completed without errors.

Note: 'note', 'default', and 'error' will also work, but are deprecated

The alternate Inline alert style includes a border instead of a line which can be used to express more urgency or better grab the attention of a user.

A Toast alert is used to present a global message about an event, update, or confirmation, like the result of a user action that cannot be presented within a specific layout or component. Toast alerts often appear away from what triggered them, may time out, automatically, and can be hard to discover in linear reading order. Toast alerts pose significant accessibility concerns and are not recommended for use.

Alert variants have different rules regarding their ability to be dismissed by a user. Default, Info, and Success Inline alerts can be dismissed by a user selecting the close button. Warning and Danger Inline alerts can be dismissed by a user resolving the issues caused by the alert. All Toast alerts can be dismissed by a user selecting the close button or waiting for them to time out.