Alert

Attributes

state

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

• default - Indicates generic information or a message with no severity.
• 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.
• warning - Indicates a caution state, like a non-blocking error that might need to be fixed.
• danger - Indicates a danger state, like an error that is blocking a user from completing a task.

DOM Property

state

Type

'default' | 'error' | 'success' | 'warning' | 'danger' | 'info'

Default

'default'

variant

DOM Property

variant

Type

boolean

Default

false

toast

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.

DOM Property

toast

Type

boolean

Default

false

dismissable

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.

DOM Property

dismissable

Type

boolean

Default

false