Toast notifications are short non-disruptive messages that appears at the bottom of the screen to provide quick, at-a-glance feedback on the outcome of an action.
Best practice
- Placement: toasts are positioned at the bottom-right side of the screen.
- They should be used for very short messages to confirm an action, ideally a successful state such as ‘sheet generated’ or ‘new team member added’.
- Avoid using toast for error messages. Instead, use a system banner.
- In cases where a title is not sufficient, include a subtitle although keep as short as possible. Alternatively, look at using a system banner.
- Use the delay timer when notifications are not mission critical (or happen more often) and you don't need the user to actively dismiss them. If you hover over the cards, the timer is interrupted offering the user an option to immediately hide the notification.
Content guidelines
- Do use the heading to provide the reason for the notification
- Don’t make the heading longer than 40 characters
- Do use the subheader to explain the action the user needs to take OR what they need to know about this thing
- Do allow the user to link through to the appropriate place if they click through
