- Get Started
- Product
- Resources
- Tools & SDKs
- Reference
Menu
- Get Started
- Product
- Resources
- Tools & SDKs
- Reference
Toast
A succinct message that is displayed temporarily.
Was this example helpful?
Usage#
Import the toast
utility and Toaster
component from @medusajs/ui
:
Then, add the Toaster
component somewhere in your tree:
Finally, use the toast
utility to display a toast:
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:
- A string indicating the title of the toast.
- An object of props to pass to the underlying
Toast
component.
Toast Props#
This component is based on the Sonner toast library.
Prop | Type | Default |
---|---|---|
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.
Prop | Type | Default |
---|---|---|
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?