// Once, near the root of the app
<Toaster />
// Anywhere
toast.success("Booking confirmed");Re-exported from Sonner with the kit's tokens
applied, so toast, toast.success, toast.error, toast.promise and the
rest behave as documented there.
API
| Prop | Type | Default | |
|---|---|---|---|
className | string | — | |
closeButton | boolean | — | |
containerAriaLabel | string | — | |
customAriaLabel | string | — | |
dir | "auto" | "ltr" | "rtl" | — | |
duration | number | — | |
expand | boolean | — | |
gap | number | — | |
hotkey | string[] | — | |
icons | ToastIcons | — | |
id | string | — | |
invert | boolean | — | |
mobileOffset | Offset | — | |
offset | Offset | — | |
position | Position | — | |
richColors | boolean | — | |
style | CSSProperties | — | |
swipeDirections | SwipeDirection[] | — | |
theme | "dark" | "light" | "system" | — | |
toastOptions | ToastOptions | — | |
visibleToasts | number | — |
Plus the DOM props of the element it renders. Source: sonner/components/sonner.tsx.