Toast

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.

Toaster Props#

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

Examples#

Dismissable Toast#

Warning#

Error#

Success#

Loading#

With Action#