Toast Alerts
Toast alerts are used to provide timely information about system occurrences as well as feedback on the outcome of user actions.
Section titled “ Design”Variants
Section titled “Variants”
Section titled “ In Practice”- Toast alerts may be set to auto-dismiss after a certain period of time, but should always include UI for the user to manually dismiss.
- Float on top of the other UI elements on the page; their presence does not alter the position of any other elements.
- Always include a drop shadow.
- Appear on the screen with an animation.
Variants
Section titled “Variants”The four variants use different icons and colors to indicate the type and urgency of the message.
- Info: informs the user of a change or gives them advice.
- Success: lets the user know of a successful outcome. NOTE: Toast alerts are used by default for this type of messaging. Use a banner alert only if it is persistent, delayed, or if there is an additional action.
- Warning: lets the user know about important system information that deserves caution.
- Danger: alerts the user of a problem that requires immediate attention.
Placement
Section titled “Placement”- Default placement is top center of the page; sliding in from the left.
- Final placement and animation direction may be determined on a case-by-case basis.
By default, toast alerts should appear stacked over content, at the top center of the viewport.
New response to your comment.
//highlight-next-line<div class="alert alert--success alert--toast alert--toast--bottom-right role="alert"> <p class="alert__description">…</p></div>
Section titled “ Content guidelines”- Toast alerts typically do not include a title.
- It’s best to keep their content short since they cover other UI elements on the page. (140 character max.)
- Use sentence case and appropriate punctuation.
Section titled “ Accessibility”- Toast alerts are dismissible with keyboard [esc].
- For alerts with no actions, notify the user via assistance technologies without having to change focus to the toast alert.
Follow the accessibility guidelines for each component found in the alert. View guidelines