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" />

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	-