Toast

Toasts can appear at any time to provide instant feedback on actions. They are usually temporary, but can also require the user to dismiss.

Examples

Variants

Watch promises

Functions

The toast object exposes the following methods to dispatch toasts imperatively. Each method accepts a message argument of type string | JSX.Element and returns a toast id.

Method	Description
`toast.informational(message)`	Dispatches an informational toast
`toast.success(message)`	Dispatches a success toast
`toast.critical(message)`	Dispatches a critical toast
`toast.warning(message)`	Dispatches a warning toast
`toast.loading(message)`	Dispatches a loading toast with a spinner
`toast.promise(promise, messages)`	Tracks a promise and dispatches loading, success, or error toasts accordingly. The `messages` argument is an object with `loading`, `success`, and `error` keys, each accepting `string \| JSX.Element`
`toast.dismiss(toastId?)`	Dismisses a toast by id, or all toasts if no id is provided

Note: A ToastStack must be rendered in your application for toasts to appear.

ToastStack

Toasts can appear at any time to provide instant feedback on actions. They are usually temporary, but can also require the user to dismiss.

Alert

Alerts call attention to a semantic message and load alongside the rest of the page content. They can optionally be dismissed upon user action.

Modal

Modal displays content related to a minor job within a page's main job. It demands complete attention and blocks interactions outside the overlay.

Best Practices Best Practices