Feedback & Status
Toast
A Toast communicates confirmation of an action or a low-priority message that does not need to completely interrupt the user experience.
Status
Supported
Introduced
v3.3.0
Status
Supported
Introduced
v3.3.0
Interactive Demo
This demo allows you to preview the Toast component, its variations, and configuration options.
Anatomy
A Toast contains one required element and three optional elements.
| Item | Name | Description | Component | Optional |
|---|
Options
A Toast has the following options to provide an appropriate experience for different scenarios.
Intent
A Toast has five intents: neutral, informative, notice and positive and negative. Each intent is used to communicate a specific semantic tone of the Toast to the user.
Icon
An icon can be displayed in Toast to indicate the status or intent and to help those with colour blindness discern the message tone.
Title
A title can be displayed in the Toast to provide the user with extra context to the message.
Actionable
A CTA button with a contextual label can be added to the Toast to provide the user with the option to perform another action relevant to the one just taken e.g. ‘Undo’.
Auto-Hide Duration
A Toast’s auto-hide duration can be altered to increase or decrease the amount of time it is displayed before hiding. This is to allow the users more or less time to read the content in the Toast.
Position
A Toast can be positioned to appear and hide from the following positions on the screen: top-left | top-center | top-right | bottom-left | bottom-center | bottom-right
Offset
A Toast can have an offset to create space from the horizontal and/or vertical edge of the screen.
Intent
A Toast has five intents: neutral, informative, notice and positive and negative. Each intent is used to communicate a specific semantic tone of the Toast to the user.
Icon
An icon can be displayed in Toast to indicate the status or intent and to help those with colour blindness discern the message tone.
Title
A title can be displayed in the Toast to provide the user with extra context to the message.
Actionable
A CTA button with a contextual label can be added to the Toast to provide the user with the option to perform another action relevant to the one just taken e.g. ‘Undo’.
Auto-Hide Duration
A Toast’s auto-hide duration can be altered to increase or decrease the amount of time it is displayed before hiding. This is to allow the users more or less time to read the content in the Toast.
Position
A Toast can be positioned to appear and hide from the following positions on the screen: top-left | top-center | top-right | bottom-left | bottom-center | bottom-right
Offset
A Toast can have an offset to create space from the horizontal and/or vertical edge of the screen.
Behaviours
The following guidance describes how a 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
Multiple Toasts can be displayed at the same time using a queue system (Toast provider).
Persist on Interaction
When the Toast is in a hover or focus state, then it does not auto-hide (pause). After the Toast isn’t in a hover or in a focus state, then 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
Multiple Toasts can be displayed at the same time using a queue system (Toast provider).
Persist on Interaction
When the Toast is in a hover or focus state, then it does not auto-hide (pause). After the Toast isn’t in a hover or in a focus state, then the timer starts from where it left off (unpause).
Usage
The following guidance describes how and when to appropriately use a Toast component.
Do
Use a Toast to communicate confirmation of an action or a low-priority message that does not need to completely interrupt the user’s experience.
Don’t
Place a Toast over navigation.
Do
Consider the placement of a Toast in relation to other user feedback components such as banners, to avoid them from clashing.
Don’t
Display more than one action in a Toast. Having more than one action to choose from can make it difficult for users to decide what action to do next.
Do
Always have offset (space) from the edge of the screen to the Toast.
Don’t
Display more than one Toast where it can be avoided. Where applicable, update the content of the current Toast instead e.g. “Article saved. ‘Undo’” to “Article removed”.
Accessibility Considerations
A Toast implements the best practice from the W3C guidelines.
| Order | Element | Role |
|---|
| Command | Description |
|---|
| Element | Attribute | Value | Description | User Supplied |
|---|
API
A Toast has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
| Name | Type | Default | Description | Required |
|---|
A function that can be invoked to display a toast. Returns a toast ID.
| Argument | Type | Default | Description | Required |
|---|
Compliance
All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.
| Feature | Description | Status |
|---|