1. Home
  2. Components
  3. Alerts

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