Toaster

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

PropertyDescriptionDefault
themeToast's theme, either light, dark, or systemlight
richColorsMakes error and success state more colorfulfalse
expandToasts will be expanded by defaultfalse
visibleToastsAmount of visible toasts3
positionPlace where the toasts will be renderedbottom-right
closeButtonAdds a close button to all toastsfalse
offsetOffset from the edges of the screen.32px
dirDirectionality of toast's textltr
hotkeyKeyboard shortcut that will move focus to the toaster area.⌥/alt + T
invertDark toasts in light mode and vice versa.false
toastOptionsThese will act as default options for all toasts. See toast() for all available options.4000
gapGap between toasts when expanded14
loadingIconChanges the default loading icon-
pauseWhenPageIsHiddenPauses toast timers when the page is hidden, e.g., when the tab is backgrounded, the browser is minimized, or the OS is locked.false
iconsChanges the default icons-
cnCustom function for constructing/merging classes.classes.filter(Boolean).join(' ')