Toasts show information without interrupting the user experience. They can either disappear automatically or remain until the user performs an action.
- To confirm an action has happened or will happen if no other feedback is provided.
- To convey short pieces of information.
- To provide a single action.
- To show users an action they can take but don’t have to.
- If the user needs to pay attention to the information provided. Use a modal or notification instead.
- If you need to convey a lot of information.
- If you need to provide more than one action.
- If the user must act - even toasts that don’t auto-dismiss may be overlooked due to the position of the component.
Live example
Available platforms
Platform |
Available |
---|---|
Figma |
v3+ |
Web (@ovotech/element) |
v3+ |
App (@ovotech/element-native) |
v3+ |
How to use it
Toasts are usually a single, short message that appears at the bottom of the screen so they don’t interrupt the user’s experience.
- Toasts confirm when an action has happened, will happen, or when an action has failed.
- Only one toast should be visible at a time. Each new toast must be displayed after the previous one. Any toast with new information can replace an old one immediately.
- A standard toast will auto-dismiss. This means that it'll automatically disappear after a defined period. Toasts should include a visible backwards loading bar to show how long is left before the disappear.
Variants
Error variant
The error variant is red rather than green and should only be used to indicate when something has gone wrong.
[EXAMPLE]
Dismissible variant
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 backwards loading bar.
[EXAMPLE]
CTA links
Toasts can also contain a single CTA link. These toasts won't auto-dismiss and don't have a backwards loading bar.
[EXAMPLE]
These toasts can also include a close symbol. If a toast includes a closing symbol and a CTA link, the CTA link should be aligned at the bottom of the toast, with the close button to the right.
[EXAMPLE]
CTA links can either be inline with the text or underneath if there’s no room for it to appear on a single line. CTA link text should describe what the link opens - avoid text such as “see more” or “click here”.
[EXAMPLE]
Text
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.
[EXAMPLE]
Add ToastContainer to your App.
import { ToastContainer } from '@ovotech/element'; // @ovotech/element-native for RN, it has almost same API!
export default App() {
return (
//... rest of the app
<ToastContainer/>
)
}
Call showToast with needed options.
import { showToast } from '@ovotech/element'; // @ovotech/element-native for RN
export default PasswordResetSuccess() {
useEffect(() => {
showToast({ message: "New password saved" })
}, []);
return (
//... rest of the component
)
}
Accessibility
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As someone with a cognitive disability, I want to be able to understand the information required from me, and the options I can choose.
- As a keyboard-only user, I want to be able to navigate to a toast that can be dismissed and activate it using the Space key.
- As a keyboard-only user, I want to be able to navigate to a CTA on a toast and activate it using the ‘Space’ key.
- As a screen reader user, I want the toast text and options to be announced when it appears.
Properties
Web
ToastContainer
Name |
Values |
Default |
---|---|---|
position |
'bottom-right' , 'top-right' |
'bottom-right' |
reverseOrder |
boolean |
false |
gutter |
number (px) |
8 |
showToast
Name |
Values |
Default |
---|---|---|
dismissible |
boolean |
false |
duration |
number (ms) |
5000 |
action |
{ |
- |
message |
string |
- |
variant |
'default' , 'error' |
'default' |
Native
ToastContainer
Name |
Values |
Default |
---|---|---|
top |
number |
-80 |
showToast
Name |
Values |
Default |
---|---|---|
dismissible |
boolean |
false |
duration |
number (ms) |
5000 |
action |
Function (): void |
- |
actionTitle |
string |
- |
message |
string |
- |
variant |
'default' , 'error' |
'default' |
Related foundations
Related components
Related patterns
External links
- xxx