Newskit Logo
About

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

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
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.

ItemNameDescriptionComponentOptional
1
IconIndicates the status or intent.Icons
2
TitleReinforces the message text.Text Block
3
MessageCommunicates what is about to happen or has happened.
4
ActionsEnables a user to perform a relevant action such as 'Undo'.

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.

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
OrderElementRole
1
LinkFocusses to the link in the message (if provided)
2
ActionFocusses to the first action (if provided)
3
ActionFocusses to the next action (if provided)
Keyboard Interactions
CommandDescription
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
ElementAttributeValueDescriptionUser 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.

NameTypeDefaultDescriptionRequired
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.
ToastProvider
NameTypeDefaultDescriptionRequired
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.

ArgumentTypeDefaultDescriptionRequired
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.

FeatureDescriptionStatus
VariationsRelevant variations (style, size, orientation etc.)
Interactive statesAll interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behavioursGuidelines for layout, animation, interactions, etc.
Usage guidelinesIncludes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelinesFollows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelinesConforms to best practice SEO techniques. SEO considerations defined.
PropsDetails of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerationsDetails on how this component may impact performance.
Available in UI kitIncluded within Figma Web Gallery file.
Design specificationsDetailed design specification including sizing, spacing and design tokens defined.
ThemesDisplays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Cant find what you are looking for?