Toast

Usage

---

Import the toast utility and Toaster component from @medusajs/ui:

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

Then, add the Toaster component somewhere in your tree:

<Toaster />

Finally, use the toast utility to display a toast:

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