Use a toast to show updates about processes at the bottom of the screen without interrupting the user experience
They can either disappear automatically or remain until the user performs an action
Toasts can have default green or error red styling
1. Timed / Default styling
2. Dismissible / Error styling
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. If a toast includes a closing symbol and an action, the action should be aligned at the bottom of the toast, with the close button to the right.
Actions can either be inline with the text or underneath if there’s no room for it to appear on a single line. 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
External links