Use a toast to show updates about processes without interrupting the user experience.
They can either disappear automatically or remain until the user performs an action.
1. Timed
2. Dismissible
Usage
Use a toast confirm an action has happened or will happen if no other feedback is provided. The message must be short and cn contain a single action.
Standard toasts auto-dismiss. However, it's possible to use a dismissible variant. These toasts remain until the user dismisses them. Dismissible toasts should include a close symbol in the right-hand corner to enable this. This type of toast doesn’t have a timer bar.
Don’t use a toast if the user must act - even toasts that don’t auto-dismiss may be overlooked due to the position of the component. Use a modal or notification instead.
Use the red, error variant to indicate when something has gone wrong.
Writing toasts
Toasts usually consist of a simple message about a process that’s happened, will happen, or hasn’t happened as expected. Ideally, this message will be a single line, but it can go to two lines of text. Try to stick to a maximum of around 80 characters, including spaces.
Actions
Toasts can also contain a single action. These toasts won't auto-dismiss and don't have a backwards loading bar. These toasts can also include a close symbol.
Action text should describe what the link opens - avoid text such as “see more” or “click here”.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3.1.0+ |
|
App (@ovotech/element-native) |
v3.1.0+ |
Related components