Alerts
Alerts are used to inform the user of application-wide issues, warnings, or errors. They are also used to provide direct feedback for whether an action was completed successfully or resulted in error.
Inline Alerts
Used for global or persistent alerts related to application-wide issues, warnings, or errors. These alerts may not be dismissible by the user in cases where an action is required, and are always displayed within the main white content container.
Answer
alert--toast-actions
alert--info
alert--warning
alert--danger
alert--success
Toast Alerts
Used for providing direct feedback on user actions. These alerts may be dismissible via click and/or should also disappear after a set amount of time.
alert--toast
alert--toast-warning
alert--toast-danger
alert--toast-success
Answer
| Status | |
| Info | Used to provide the user with more information or additional context |
| Warning | Used to inform the user when they are about to do something that is destructive or when the result of an action is unexpected, but isn't an error |
| Danger | Used to inform the user that something went wrong. The message should explain the problem and try to provide a next step or an alternative if the user needs to take some action in response |
| Success | Used to tell the user when an interaction or task has been completed successfully |
Best practices
Accessibility
- Use the proper ARIA role:
- "alert" if the user's immediate attention is required
- "alertdialog” if the alert provides actions for the user to perform