Feedback & Status
Toast
Toasts communicate confirmation of an action or a low-priority message.
Interactive demo
This demo lets you preview the toast component, its variations and configuration options.
Anatomy
The toast component contains one required element and three optional elements.
| Item | Name | Description | Component | Optional |
|---|
Options
The toast has options for different use cases:
Intent
The toast has five intents: neutral, informative, notice, positive and negative. Each intent communicates a specific tone to the user.
Icon
Add an icon to the toast to indicate status or intent. This also helps users who are colour blind discern the message tone.
Title
Add a title to the toast to give the message extra context.
Actionable
Add a call-to-action (CTA) button with a contextual label to the toast to give the user the option to perform another action relevant to the one just taken (e.g. ‘undo’).
Auto-hide duration
Increase or decrease how long the toast is displayed before automatically hiding, to give the user an appropriate amount of time to read the message.
Position
Position the toast to appear and hide from the following positions on the screen: top-left, top-centre, top-right, bottom-left, bottom-centre and bottom-right.
Offset
Give the toast an offset to create space from the horizontal and/or vertical edge of the screen.
Intent
The toast has five intents: neutral, informative, notice, positive and negative. Each intent communicates a specific tone to the user.
Icon
Add an icon to the toast to indicate status or intent. This also helps users who are colour blind discern the message tone.
Title
Add a title to the toast to give the message extra context.
Actionable
Add a call-to-action (CTA) button with a contextual label to the toast to give the user the option to perform another action relevant to the one just taken (e.g. ‘undo’).
Auto-hide duration
Increase or decrease how long the toast is displayed before automatically hiding, to give the user an appropriate amount of time to read the message.
Position
Position the toast to appear and hide from the following positions on the screen: top-left, top-centre, top-right, bottom-left, bottom-centre and bottom-right.
Offset
Give the toast an offset to create space from the horizontal and/or vertical edge of the screen.
Behaviours
Here’s how the toast behaves:
Text overflow wrap
When the title and/or the message in the toast is too long for the available horizontal space, it wraps to form another line.
Multi toast
Display multiple toasts at the same time using a queue system (toast provider).
Persist on interaction
When the toast is in a hover or focus state, it doesn’t auto-hide (pause). When the toast is no longer in a hover or focus state, the timer starts from where it left off (unpause).
Text overflow wrap
When the title and/or the message in the toast is too long for the available horizontal space, it wraps to form another line.
Multi toast
Display multiple toasts at the same time using a queue system (toast provider).
Persist on interaction
When the toast is in a hover or focus state, it doesn’t auto-hide (pause). When the toast is no longer in a hover or focus state, the timer starts from where it left off (unpause).
Usage
Here’s how and when to use the toast:
Do use for confirmation and low-priority messages
Use a toast to communicate confirmation of an action or a low-priority message that doesn’t need to completely interrupt the user’s experience.
Don’t place a toast over navigation
Avoid placing a toast over navigation as this may block user interaction.
Do avoid clashes with other components
Consider the placement of a toast in relation to other user feedback components (e.g. banners) to avoid clashes.
Don’t use toasts for multiple actions
Avoid displaying more than one action in a toast. Having more than one action to choose from can make it difficult for the user to decide to do next.
Do offset from the edge of the screen
Always have offset (space) from the edge of the screen to the toast.
Don’t show multiple toasts
Avoid displaying more than one toast where possible. Where applicable, update the content of the current toast instead (e.g. “Article saved. ‘Undo’” to “Article removed”).
Accessibility considerations
The toast meets accessibility best practices from the W3C guidelines.
| Order | Element | Role |
|---|
| Command | Description |
|---|
| Element | Attribute | Value | Description | User supplied |
|---|
API
The toast has a range of props to define the experience in different use cases.
| Name | Type | Default | Description | Required |
|---|
| Name | Type | Default | Description | Required |
|---|
Invoke this function to display a toast. Returns a toast ID.
| Argument | Type | Default | Description | Required |
|---|