Help

Toaster and Toast Messages

A component and utility for displaying brief messages to users, typically used for notifications or alerts. Toast messages appear momentarily on top of the application UI.

You can display multiple toast messages at once, and they will be stacked neatly.

In this guide, you'll learn how to use the Toaster component.

Was this example helpful?

Usage#

First, import the toast utility and Toaster component from @medusajs/ui:

Code
import { Toaster, toast } from "@medusajs/ui"

Then, add the Toaster component somewhere in your tree hierarchy. For example, in your main application layout:

Code
1export default function AppLayout({ children }) {2  return (3    <html>4      <body>5        {children}6        <Toaster />7      </body>8    </html>9  )10}

Finally, use the toast utility in your components to display a toast message:

Code
1export default function MyComponent() {2  return (3    <Button 4      onClick={() => 5        toast.info("Toast title", {6          description: "Toast body",7        })8      }9    >10      Trigger11    </Button>12  )13}

API Reference#

Toast Utility Functions#

The toast utility has the following functions to display different variants of toast messages:

info: Display a toast message with an informational style.
error: Display a toast message with an error style.
success: Display a toast message with a success style.
warning: Display a toast message with a warning style.
loading: Display a toast message with a loading style.

Each of these functions accept two parameters:

A string indicating the title of the toast.
An object of Toast component props.

Toast Props#

This component is based on the Sonner toast library.

Prop	Type	Default
`id`	`string` \|`number`	-
`description`	`ReactNode`	-
`action`	`object`	-

Was this helpful?

Toaster Props#

This component is based on the Toaster component of the Sonner library.

Prop	Type	Default
`position`	`Position`	`"bottom-right"`
`gap`	`number`	`12`
`offset`	`string` \|`number`	`24`
`duration`	`number`	`4000`

Was this helpful?

Examples#

Toast Variants#

Note: The following example assumes you already have the Toaster component in your application's tree.

Was this example helpful?

Dismissable Toast#

Note: The following example assumes you already have the Toaster component in your application's tree.

Was this example helpful?

Toast with Action#

Note: The following example assumes you already have the Toaster component in your application's tree.

Was this guide helpful?