Newskit Logo
View Github

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

View code

Status

Supported

Introduced

v3.3.0

Interactive Demo

This demo allows you to preview the Toast component, its variations, and configuration options.

Toast title

Toast message will display here

Intent
Icon
Actions
1import React from 'react';
2import { Toast } from 'newskit';
3
4export default () => (
5  <Toast
6    icon="your icon here"
7    title="Toast title"
8    actions="your actions here"
9  >
10    Toast message will display here
11  </Toast>
12);
13

Anatomy

A Toast contains one required element and three optional elements.

ItemNameDescriptionComponentOptional

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.

Focus order
OrderElementRole
Keyboard Interactions
CommandDescription
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied

API

Toast

A Toast has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired
ToastProvider
NameTypeDefaultDescriptionRequired
toast() function

A function that can be invoked to display a toast. Returns a toast ID.

ArgumentTypeDefaultDescriptionRequired

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.

FeatureDescriptionStatus

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?