Toaster

This component renders all the toasts, you can place it anywhere in your app.

Customization

You can see examples of most of the scenarios described below on the homepage.

Expand

When you hover on one of the toasts, they will expand. You can make that the default behavior by setting the expand prop to true, and customize it even further with the visibleToasts prop.

// 9 toasts will be visible instead of the default, which is 3.
<Toaster expand visibleToasts={9} />

Position

Changes the place where all toasts will be rendered.

// Available positions:
// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
<Toaster position="top-center" />

Styling all toasts

You can customize all toasts at once with toastOptions prop. These options will act as the default for all toasts.

<Toaster
  toastOptions={{
    style: { background: 'red' },
    className: 'my-toast',
  }}
/>

dir

Changes the directionality of the toast's text.

// rtl, ltr, auto
<Toaster dir="rtl" />

Custom ARIA label

You can customize the default ARIA label for the notification container and the toast close button.

// example in Finnish
<Toaster containerAriaLabel="Ilmoitukset" toastOptions={{closeButtonAriaLabel: 'Sulje'}} />

API Reference

Property	Description	Default
theme	Toast's theme, either `light`, `dark`, or `system`	`light`
richColors	Makes error and success state more colorful	`false`
expand	Toasts will be expanded by default	`false`
visibleToasts	Amount of visible toasts	`3`
position	Place where the toasts will be rendered	`bottom-right`
closeButton	Adds a close button to all toasts	`false`
offset	Offset from the edges of the screen.	`32px`
dir	Directionality of toast's text	`ltr`
hotkey	Keyboard shortcut that will move focus to the toaster area.	`⌥/alt + T`
invert	Dark toasts in light mode and vice versa.	`false`
toastOptions	These will act as default options for all toasts. See toast() for all available options.	`4000`
gap	Gap between toasts when expanded	`14`
loadingIcon	Changes the default loading icon	`-`
pauseWhenPageIsHidden	Pauses toast timers when the page is hidden, e.g., when the tab is backgrounded, the browser is minimized, or the OS is locked.	`false`
icons	Changes the default icons	`-`
containerAriaLabel	Custom ARIA label for the toast container.	`Notifications`
cn	Custom function for constructing/merging classes.	`classes.filter(Boolean).join(' ')`

toast()Styling