Toast
A toast displays a short system message as a result of a user's action.
Examples
Structure
- Container: Wraps the content.
- Message: Text content indicating the purpose and potential next steps.
- Action (optional): A single text action a user can take based on the content of the toast.
- Dismiss button: Removes the toast for a user.
Guidelines
When to use
- Provide a contextual message based on a user's action in the same view the action took place.
When not to use
- If you need to communicate an error to a user, consider using a danger or warning alert instead.
- If there's a page refresh, or a message needs to be communicated after a user visits a new page, consider using an alert instead.
- If the action is irreversible, consider using a modal instead.
Behavior
- A toast appears with an ease-in animation from the bottom of the viewport after a user's action.
- A user can dismiss the toast by clicking the “dismiss” icon button.
- If left alone, a toast without an action will disappear after five seconds.
- Hovering over a toast causes it to remain until the cursor is moved.
- A toast with an action is only dismissed when a user does one of the following:
- Clicks the action.
- Clicks the dismiss button.
- Navigates to another page.
Content
- The message should be a concise full sentence that ends with a period.
Placement
- Centered at the bottom of the viewport for smaller breakpoints and bottom left of the viewport for larger breakpoints.
- Multiple toasts stack vertically from top to bottom with the oldest on top.
Accessibility
Last updated at: