Toast

A succinct message that is displayed temporarily.

Was this example helpful?

Usage#


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:

Code
<Toaster />

Finally, use the toast utility to display a toast:

Code
1return (2  <Button 3    onClick={() => 4      toast.info("Toast title", {5        description: "Toast body",6      })7    }8  >9    Trigger10  </Button>11)

API Reference#


Toast Utility Functions#

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

  • info
  • error
  • success
  • warning
  • loading

Each of these functions accept two parameters:

  1. A string indicating the title of the toast.
  2. An object of props to pass to the underlying Toast component.

Toast Props#

This component is based on the Sonner toast library.

PropTypeDefault
id
string
|number
-
description
string
-
action
object
-
dismissLabel
string
"Close"
Was this page helpful?

Toaster Props#

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

PropTypeDefault
position
Position
"bottom-right"
gap
number
12
offset
string
|number
24
duration
number
4000
Was this page helpful?

Examples#


Dismissable Toast#

Was this example helpful?

Warning#

Was this example helpful?

Error#

Was this example helpful?

Success#

Was this example helpful?

Loading#

Was this example helpful?

With Action#