Toast
Toasts are a subtle way to confirm that an action requested by the user has been performed. They will appear temporarily at the bottom of the browser window and do not require user interaction. For users with a visual impairment, toasts also enable us to communicate to screen readers that the action was completed successfully.
Design Usage
Use
- To confirm an action on the same page if the completion of the task may not be obvious
Don’t use
- To display an error or warning message
- To interrupt users while they are performing an action
- To make sure that users have read a message before leaving the page
- To confirm an action that takes the user to a new page
Anatomy
Toasts consist of a container, an icon, and text.
Container
Toast containers always have a background of @grey-darkest with a 1px white border. Toasts have a minimum width of 288px and a maximum width of 568px.
Icon
| Icon | Name | Description |
|---|---|---|
| Success | An action was completed |
Text
- Briefly describe the action performed
- Use [Subject] [verb] format
- Use sentence case without punctuation (!,.)
- Use singular and plural nouns as necessary
Do
Don’t
Examples
| Action | Text |
|---|---|
| Add | Receipt added |
| Allocate | Report allocated |
| Delete | Expense deleted |
| Duplicate | Expense duplicated |
| Move | Expense moved |
| Save | Expense saved |
| Upload | Image uploaded |
Behavior
Interaction
Toasts do not interrupt a user’s task and require no action.
Motion
Toasts animate upwards from the bottom edge of the screen (1 second), stay visible for 4 seconds, and then animate downwards (400ms).
Position
Toasts are horizontally centered at the bottom of the screen and appear above all other elements.
Dismissing a Toast
Toasts automatically disappear after 4 seconds or if another toast is triggered.