A succinct message that is displayed temporarily, providing feedback about an operation.
Installation
$ npx shadcn@latest add "/r/toast.json"
Usage
To use the toast component, wrap your application in a ToastProvider and include a ToastViewport within a ToastPortal. Then, use the useToast hook to trigger notifications.
Variants
Toasts come with several variants to convey different statuses. The component automatically renders an appropriate icon for each variant.
Examples
With Action
You can add an interactive action to the toast using the ToastAction component.
Props
ToastRoot
Prop
Type
Default
Description
variant
`"default"
"success"
"error"
children
React.ReactNode
-
The content of the toast.
className
string
-
Additional CSS classes for the toast root.
ToastProvider
Prop
Type
Default
Description
children
React.ReactNode
-
The application components that can trigger toasts.
ToastViewport
Prop
Type
Default
Description
className
string
-
Additional CSS classes for the toast viewport.
ToastTitle
Prop
Type
Default
Description
children
React.ReactNode
-
The title text for the toast.
className
string
-
Additional CSS classes for the title.
ToastDescription
Prop
Type
Default
Description
children
React.ReactNode
-
The description text for the toast.
className
string
-
Additional CSS classes for the description.
ToastClose
Prop
Type
Default
Description
className
string
-
Additional CSS classes for the close button.
ToastAction
Prop
Type
Default
Description
children
React.ReactNode
-
The content of the action button.
onClick
() => void
-
Function called when the action button is clicked.