Toast

Stacked notifications with actions.

import { Toast } from 'components/UI/Toast'

Basic

Call add() from Toast.useToastManager() with a title and a description. Click more than once to stack toasts.

Pass actionProps to add a button. The action does not close the toast, so close it in onClick.

Use a status type when the toast reports a result, such as a save that failed. The type sets the icon and its color.

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Choose the component from where the message sits and what the user does with it.

Component	Use it for
Badge	A status or category that the user reads, such as Beta.
Chip	A thing the user can open or act on, such as a person, a filter, or a selected value.
Note	Context inside content, such as a tip in a docs page.
Banner	A notice about the whole page, at the top. One at a time.
Toast	Brief feedback after an action.

Do not put information in a toast that the user must keep, because the toast closes.
The site root already renders the toast stack. Add a toast with Toast.useToastManager().add() in a component, or with globalToastManager.add() outside React. Do not render another provider.
Toasts stack in one column at the bottom right, newest at the bottom, and close after 3 seconds. Set timeout: 0 for a toast that stays until the user closes it, and use onClose to react to the close.
An action does not close its toast. Call close(id) with the id that add() returns.

Props that the library adds. Every part also takes all the Base UI props.

Prop	Type	Default	Description
type	ColorName \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'brand' \| 'loading'	–	A status alias shows its icon in its brand color. A brand color name shows the info icon in that color. loading shows a spinner. Omit type to show no icon.

Prop	Type	Default	Description
image	ReactNode	–	A decorative image placed in the toast. Position it with absolute classes.
align	'start' \| 'center'	'center'	Aligns the icon and buttons with the top or the middle of the text.

Prop	Type	Default	Description
container	HTMLElement \| ShadowRoot \| RefObject \| null	–	The element that the toasts render into. The default is the document body.