Toast notification
Event-driven, real-time notifications that provide additional information to the user.
Loading...
Resources
Variations
Informational
The informational toast notification is used by default, and typically provides generic messaging
or context to a user where no action needs to be taken.
Upgrade
Use upgrade toast notification to inform users about features that can be enabled or fully-featured by upgrading their account.
Educational
Educational toast notifications often link to Learn or Help documentation, and are especially helpful when launching new features or onboarding new users.
Success
Success toast notifications indicate the successful completion of an action or task.
Warning
Warning indicates there may be issues for the user to take notice of, without need for immediate action. Warning toast notifications should not be used for critical errors or destructive actions.
Destructive
Destructive toast notifications are used to confirm what is likely to be irreversable action for the user, such as deleting data, or to indicate that a critical error has occurred.
Usage
Best practices
- A maximum of 2 actions can be placed in the toast notification, although it is recommended to keep it consolidated to a single action to narrow focus of the toast notification’s purpose. Rather than any “dismiss”-type button actions, use the dismiss indicator in the corner instead.
Content guidelines
Toast notificaition titles are written clearly in sentence case and in complete sentences, with no punctuation at the end. Write toast notification titles so that they can be easily translated into different languages. Toast notification descriptions should be written in full and complete sentences, with punctuation at the end.
Accessibility
Keyboard support
- When there is a dismiss indicator, move focus to it using the
tabkey - When there are actions, move focus to them using the
tabkey - On either the dismiss indicator or actions, use the
spaceorenterkey to perform action
