- Get Started
- Product
- Resources
- Tools & SDKs
- Framework
- Reference
Menu
- Get Started
- Product
- Resources
- Tools & SDKs
- Framework
- 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 | ReactReactNode | - |
action | ToastAction | - |
Was this page helpful?
Toaster Props#
This component is based on the Toaster component of the Sonner library.
Prop | Type | Default |
---|---|---|
position | "bottom-right" | |
gap | 12 | |
offset | 24 | |
duration | - |
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#
Was this example helpful?