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

View Design

Status

Supported

Introduced

v3.3.0

View code

View Design

Interactive Demo

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

Toast title

Toast message will display here

import React from 'react';
import { Toast } from 'newskit';

export default () => (
  <Toast
    icon="your icon here"
    title="Toast title"
    actions="your actions here"
  >
    Toast message will display here
  </Toast>
);

Anatomy

A Toast contains one required element and three optional elements.

Item	Name	Description	Component
1	Icon	Indicates the status or intent.	Icons
2	Title	Reinforces the message text.	Text Block
3	Message	Communicates what is about to happen or has happened.	Text Block Link
4	Actions	Enables a user to perform a relevant action such as 'Undo'.	Button Icon Button

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

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

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.

Do not

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.

Do not

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.

Do not

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

Order	Element	Role
1	Link	Focusses to the link in the message (if provided)
2	Action	Focusses to the first action (if provided)
3	Action	Focusses to the next action (if provided)

Keyboard Interactions

Command	Description
Tab	When focus is outside of the Toast it moves focus to the first link or action in the Toast. If focus is on the first link or action in the Toast it moves focus to the next link or action in the Toast.
Shift Tab	Focuses the previous link or action (if provided) in the Toast.
Rtn	Activates the focussed link or action in the Toast.

WAI-ARIA

Element	Attribute	Value	Description	User Supplied
Toast	role	status	The aria-role can be used to identify the role of the Toast within an interface. It is set to ‘status’ by deault.
Toast	aria-live	polite	The aria-live attribute makes possible for content within the aria-live region to automatically be read by the screen reader, without having to focus on the place where the text is displayed.

API

Toast

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

Name	Type	Default	Description
children	Exclude<React.ReactNode, 'undefined'>		Defines the content of the message of the Toast.
icon	React.ReactElement<NewsKitIconProps>		If provided, defines the icon that is displayed in the Toast.
title	string		If provided, defines the content of the title in the Toast.
actions	React.ComponentType		If provided, defines the action(s) that is/are displayed in the Toast.
role	string	status	Defines the aria-role attribute of the Toast within an interface. Learn about aria-role.
ariaLive	string	polite	Defines the aria-live attribute of the Toast within an interface. Learn about aria-role.Learn about aria-live.

Attribute	Type	Default	Description
stylePreset	MQ<string>	toastNeutral	Overrides the style preset of the Toast container. There are the following style presets for other Toast intents: toastPositive \| toastNegative \| toastInformative \| toastNotice
spaceInset	MQ<string>	spaceInset030	Overrides the spaceInset of the Toast container.
width	MQ<string>		Overrides width of the Toast container.
minWidth	MQ<string>		Overrides the minWidth of the Toast container.
maxWidth	MQ<string>	xs = 90% sm = 60% md = 45% lg = 38% xl = 31%	Overrides maxWidth of the Toast container. Note - This accepts a sizing token or a standard CSS sizing value.
minHeight	MQ<string>		Overrides the minHeight of the Toast container.
content .message .stylePreset	MQ<string>	inkInverse	Overrides the stylePreset of the Toast message.
content .message .typographyPreset	MQ<string>	utilityBody010	Overrides the typographyPreset of the Toast message.
content .title .stylePreset	MQ<string>	inkInverse	Overrides the stylePreset of the Toast title.
content .title .typographyPreset	MQ<string>	utilityHeading010	Overrides the typographyPreset of the Toast title.
content .title .spaceStack	MQ<string>	space010	Overrides the space between title and message.
contentAndActions .spaceInline	MQ<string>	space030	Overrides the space between the message and the divider and also the divider and actions. Note - it’s only applicable when actions are displayed.
divider .stylePreset	MQ<string>	dividerInverse	Overrides the style preset applied to the Toast divider.
icon .spaceInline	MQ<string>	space030	Overrides the space between the icon and the content.

ToastProvider

Name	Type	Default	Description
position	top-left top-center top-right bottom-left bottom-center bottom-right	bottom-center	Defines the position of Toast on the screen.
autoHideDuration	number	6000	Defines the duration that the Toast displays for before auto-hiding. A digit represents 1 millisecond.
horizontalOffset	MQ<string>	space040	Defines the horizontal offset from the left or right hand side of the screen. Note - This accept a space token or a standard CSS space value
verticalOffset	MQ<string>	space040	Defines the vertical offset from the top or bottom of the screen. Note - This accepts a space token or a standard CSS space value.

toast() function

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

Argument	Type	Default	Description	Required
1	function React.ReactNode	space040	Defines the Toast component to be toasted.
2	{autoHideDuration: number}		Defines the duration that the Toast displays for before auto-hiding. A digit represents 1 millisecond. The default values is provided as prop to <ToastProvider />

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
Variations	Relevant variations (style, size, orientation etc.)
Interactive states	All interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behaviours	Guidelines for layout, animation, interactions, etc.
Usage guidelines	Includes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelines	Follows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelines	Conforms to best practice SEO techniques. SEO considerations defined.
Props	Details of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerations	Details on how this component may impact performance.
Available in UI kit	Included within Figma Web Gallery file.
Design specifications	Detailed design specification including sizing, spacing and design tokens defined.
Themes	Displays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?

Toast

Status

Introduced

Status

Introduced

Interactive Demo

Anatomy

Options

Intent

Icon

Title

Actionable

Auto-Hide Duration

Position

Offset

Intent

Icon

Title

Actionable

Auto-Hide Duration

Position

Offset

Behaviours

Text Overflow Wrap

Multi Toast

Persist on Interaction

Text Overflow Wrap

Multi Toast

Persist on Interaction

Usage

Do

Do not

Do

Do not

Do

Do not

Accessibility Considerations

API

Compliance

Related Components

Banner

Drawer

Need Help?

Need Help?