Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Toast

A Toast is an animated, temporary banner that communicates an immediate and direct response to a user action.

Version 12.1.1
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/toast - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {Toast, Toaster} from '@twilio-paste/core/toast';

const Component = () => {
  const toaster = useToaster();
  return <Toaster left={['space40', 'unset', 'unset']} {...toaster} />;
};

Toaster component

Toaster component page anchor

If you choose to handle state entirely yourself, you can use <Toaster /> on its own, but you are fully responsible for handling state, time-outs, and the dismiss functionality.

<Toaster
  left={['space40', 'unset', 'unset']}
  toasts={[{
    id: '',
    message: '',
    variant: ''
    dismissAfter: ''
  }]}
  pop={(id) =>{
    // called when a toast is dismissed
  }}
/>

Props

Props page anchor

Toast

Toast page anchor

variant RequiredRequired

The style of toast you would like the user to see

Type
ToastVariants

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
TOAST

i18nDismissLabel

Label for the dismiss button in a dismissable toast

Type
string
Default
Dismiss toast

i18nErrorLabel

Icon label text for the error variant

Type
string
Default
(error)

i18nNeutralLabel

Icon label text for the neutral variant

Type
string
Default
(information)

i18nSuccessLabel

Icon label text for the success variant

Type
string
Default
(success)

i18nWarningLabel

Icon label text for the warning variant

Type
string
Default
(warning)

onDismiss

callback when user clicks the dismiss button

Type
() => void

setFocus

Use this to set focus within the toast when it is rendered

Type
boolean
Default
'true'

Toaster

Toaster page anchor

pop RequiredRequired

Method used to pop a toast from the toast stack based on it's id

Type
(id: string) => void

toasts RequiredRequired

Collection of toasts to show in the toaster

Type
ToasterToast[]

left

Sets the left value of the ToastContainer to add breakpoints for small screens

Type
Left<TLengthStyledSystem> | (Left<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Left<TLengthStyledSystem> | undefined; [x: number]: Left<...> | undefined; }

ToastContainer

ToastContainer page anchor

left

Sets the left value of the ToastContainer to add breakpoints for small screens

Type
Left<TLengthStyledSystem> | (Left<TLengthStyledSystem> | null | undefined)[] | { [x: string]: Left<TLengthStyledSystem> | undefined; [x: number]: Left<...> | undefined; }

UseToasterReturned

UseToasterReturned page anchor

pop RequiredRequired

Method used to pop a toast from the toast stack based on it's id

Type
(id: string) => void

push RequiredRequired

Method used to push a toast to the toast stack

Type
(toast: ToasterPush) => void

toasts RequiredRequired

Collection of toasts to show in the toaster

Type
ToasterToast[]