Toast
A succinct message that is displayed temporarily.
About
Toasts are used to display a succinct message that is displayed temporarily. They are used to provide feedback on an action or event. They are typically displayed at the bottom of the viewport. But they can also be configured through the position prop to the Toaster component to display at the top, bottom, left or right of the viewport.
💡
Toast is built on top of Sonner (opens in a new tab) which is a
lightweight, accessible and customizable toast library. We have customized and
added different variants on top of it. (Sonner package is not a dependency
of this)
When to Use
To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:
- A notification with complex content.
- A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
Examples
Multiline
With Action
Toast Variants
Dismissible
Async Toast
Preserve
API Reference
Properties
toast("This is a normal Toast")toast.success("This is a success Toast")toast.warning("This is a warning Toast")toast.error("This is a error Toast")toast.promise("This is a promise Toast")toast(<div>Custom Toast</div>)
toast()
| Prop | Type | Default |
|---|---|---|
duration | number | ─ |
description | string | ─ |
delete | boolean | ─ |
visual | ReactNode | ─ |
undo | {onUndo: () => void} | ─ |
action | {label: string; onClick: () => void} | ─ |
onDismiss | (toast: ToastT) => void | ─ |
onAutoClose | (toast: ToastT) => void | ─ |
Toaster
| Prop | Type | Default |
|---|---|---|
position | enum | ─ |
hotkey | string[] | ─ |
expand | boolean | ─ |
duration | number | ─ |
visibleToasts | number | ─ |