Toast

A toast notification is a brief, non-intrusive message that appears on the screen to provide users with information or alerts.

Overview

pie-toast is a Web Component built using Lit. It offers a simple and accessible toast component for web applications.

This component can be easily integrated into various frontend frameworks and customised through a set of properties.

To install pie-toast in your application, run the following on your command line:

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Prop	Options	Description	Default
isOpen	`true` `false`	When true, the toast is set to be open and visible.	`false`
variant	`"neutral"` `"info"` `"warning"` `"success"` `"error"`	Sets the variant of the toast.	`"neutral"`
isStrong	`true` `false`	When true, the toast is displayed with a strong visual style.	`false`
isDismissible	`true` `false`	When true, allows dismissing the toast by clicking on the close button.	`false`
message	`string`	The message content of the toast.	`""`
isMultiline	`true` `false`	Allows the message content to be displayed as multiline, limited to three rows.	`false`
leadingAction	`{ text: string, ariaLabel?: string }`	The leading action for the toast.	`undefined`
duration	`number` `null`	Sets the duration of the toast in milliseconds before it auto-dismisses. If the value is `null`, auto-dismiss is disabled. If the value is not provided it auto-dismisses after 5 seconds.	`5000`

Event	Type	Description
`pie-toast-close`	`CustomEvent`	Triggered when the user interacts with the close icon or when the toast auto dismiss.
`pie-toast-open`	`CustomEvent`	Triggered when the toast is opened.
`pie-toast-leading-action-click`	`CustomEvent`	Triggered when the user interacts with the leading action.

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/toast.js'

<!-- pass js file into <script> tag -->
<pie-toast message="Message"></pie-toast>
<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/toast.js';

<pie-toast message="Message"></pie-toast>

By default, the toast will auto-dismiss in five seconds. To disable the auto-dismiss functionality, you must set the duration to null.

// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/toast.js';

<pie-toast message="Message" duration={null}></pie-toast>

For React Applications:

import { PieToast } from '@justeattakeaway/pie-webc/react/toast.js';

<PieToast message="Message"></PieToast>

// React templates (using Next 13 and SSR)
import { PieToast } from '@justeattakeaway/pie-toast/dist/react';

<PieToast message="Message"></PieToast>