Toast

Toasts display small snippets of information to the user and then disappear after a set time. The Warp toast appears at the bottom of the screen but will normally be triggered by a user interaction somewhere else on the page.

React

unsupported

Vue

unsupported

Elements

released

Android

unsupported

iOS

released

Example

Usage

Design Guidelines

See Figma: Warp - Components / Toast

Accessibility

For accessibility reasons, toasts should never contain interactive elements as interactive elements should always occur in the same location as the action that triggered it. Because of this limitation, we consider the use of toasts to be somewhat of an antipattern and recommend that another approach be found wherever possible. The Warp team will be investigating potentially better approaches for specific use cases in near future. That being said, you are free to use toast so long as you avoid using interactive elements such as links or a close button.

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

Frameworks

Import

The toast is intended to be used programmatically. JavaScript APIs are provided to create, update and remove toasts from a page while managing things like placement on the page for you.

Toast is a bit different from other packages in Warp Elements. You need to import functions from the package and call them as needed.

Import functions for working with toasts:

Be sure to import the elements package first as the toast APIs depend on this package.

import '@warp-ds/elements';

Once you have imported the elements package, import the toast api package.

import { toast, removeToast, updateToast } from '@warp-ds/elements';

Syntax

You create a new toast by giving it a message:

toast('This is a toast');

Create a new toast giving it a message and some options and then get back an id that can be used later to remove or edit the toast:

const id = toast('This is a toast', { type: 'warning' });

Update an existing toast by id:

updateToast(id, { text: 'This is a toast' });

Visual options

Success

toast('message goes here', { type: 'success' });

Warning

toast('message goes here', { type: 'warning' });

Error

toast('message goes here', { type: 'error' });

Success with close button

WARNING! The close icon is designed to automatically close by default, and it is recommended to avoid adding the manual close function due to accessability reasons. If the toast absolutely must be dismissible, set the canclose property to true.

toast('message goes here', { type: 'success', canclose: true });

Options

Auto removal with duration

toast('message goes here', { type: 'success', duration: 2500 });

Text content

const id = toast('message goes here'); updateToast({ id, text: 'change the message' });

Props

Optional Props

name	type	default	notes
type	'success' | 'warning' | 'error'	'success'	Type of toast
text	string	undefined	The toast message. Only needed when updating text on existing toast
duration	number	5000	Duration of toast in milliseconds. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.
canclose	boolean	false	Adds a close button. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissible, set this to true.