Toast
Toasts are used to show live, time-sensitive feedback to users.
On this page
On this page
Usage
Toasts are used to provide relevant feedback to the user, typically after they've taken an action. Primer includes styles for success, warning, error, loading, and default toasts. Some examples include:
- Confirmation that an action was successfully taken
- Communicating that an action is pending
- Notifying the user if an action failed to complete
- Providing general information
Toasts are best used in context of the page they're referring to (rather than a global notification that can appear on any page) and should require minimal user interaction. Toasts are best used to display time-sensitive information. For global notices and messaging, see the flash component.
Toasts should be brief and not bog down the experience with superfluous copy. If multiple toasts appear on the page, they will stack naturally.
Use brief and direct communication.
Don't use wordy and redundant copy, and avoid exceeding 140 characters.
Accessibility
Toasts are non-modal components and should contain role=log, which implies the element has aria-live="polite". This notifies the user of the toast via Assistance Technologies without having to change focus to the toast. You can read more about role=log at W3: Using role=log to identify sequential information updates.
Toasts are generally informative and should not receive focus when they appear. For that reason, we suggest you avoid using interactive elements in the component (aside from a dismiss action). Keep in mind that, even without an explicit dismiss action, the user can always hit esc to dismiss the toast. For more information on how interactive children affect web accessibility, check out this issue.