Toaster

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

⚠️

Ensure there is only 1 Toaster component rendered in your app at all times

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 customzie all toasts at once with toastOptions prop. These options will act as the default for all toasts.

<Toaster
  toastOptions={{
    alertSx: {
        backgroundColor: "red",
    },
  }}
/>

Check out the styling documentation for all available options.

dir

Changes the directionality of the toast's text.

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

API Reference

Property	Description	Default
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 (excluding action toasts)	`-`
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`
toastOptions	These will act as default options for all toasts. See toast() for all available options.	`4000`
gap	Gap between toasts when expanded (px value)	`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`

toast()Styling