View in Storybook
Anatomy
Toast is supposed to be used as an immediate response to the user's action. It should inform the user about the result of the action they just did.
- iconLeft (optional): To support a tooltip label's context.
- Text: When the messaging of a tooltip is shown.
- Link (optional): Used when an action is needed that is related to the toast text.
- Dismiss icon: Available to remove the toast from view more quickly.
Types
Default
This is used to display almost all of our confirmational toast messaging. An icon can be included but is not essential, and the recommendation would be to add it very sparingly.
Loading
A toast with a loading spinner that disappears once the process is complete.
Error
This is used to show an error or failure and always contains our alert icon. Error should only be used occasionally such as for system and connection messaging.
Usage
With an action
When necessary, a user can be given the option to perform an action from a toast notification.
Placement
When our toasts are activated they are positioned at the bottom of the browser window in the centre of the screen
Multiple
This is used to display almost all of our confirmational toast messaging. An icon is can be included but is not essential. Maximum of 3 toasts that stack on top of one another. As another is activated, the toast at the top is automatically removed.
Transition
An slide-in smooth motion from the bottom in the centre is obvious enough to grab attention but not overwheming to distract users.
Toast vs Alert
Although similiar in messaging, there is a rule as to when we use a Toast vs Alert within the product. A Toast communicates a message within a page, whereas an Alert communicates a message at page level.
Toast examples
- Saving teamspaces/features
- Archiving pages
- Deleting roadmaps
Alert examples
- Anything that requires feedback or an action
- Product-level updates
- Communicates feedback at the end of user input flows
Best practice
- Toasts must include text to communicate a message.
- They automatically disappear without user interaction, but can be dismissed before this
- We rarely want to use them for error messages, expect at page level for larger product errors that are not specific to a user action.
- Use past tense for the title. An action it informs about has happened already.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Write any messaging in sentence case. |
🚫 Add a period at the end of a Toast message. |
|
✅ Keep the message short and clear, up to 5 words due to them only appearing for 3-4 seconds |
🚫 Include more than 3 Toasts at any one time. |
|
|
🚫 Change the toast background as they need to be visually consistent. |
Also see