Toast
The Toast component briefly surfaces to deliver timely messages or alerts, offering immediate, actionable feedback without disrupting the user's flow. Its temporary nature ensures important information is conveyed seamlessly and dismissed effortlessly.
Additional Examples
Simple
With title
With Action
Destructive
Use toast({ variant: "destructive" })
to display a destructive toast.
Configurable Props
Toast
Prop | Type | Default/ Options | Description |
---|---|---|---|
type | enum ("foreground" | "background") | "foreground" | Control the sensitivity of the toast for accessibility purposes. For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background. |
duration | number | The time in milliseconds that should elapse before automatically closing the toast. This will override the value supplied to the provider. | |
defaultOpen | boolean | true | The open state of the dialog when it is initially rendered. Use when you do not need to control its open state. |
onOpenChange | function (open: boolean) => void | Event handler called when the open state of the dialog changes. | |
onEscapeKeyDown | function (event: KeyboardEvent) => void | Event handler called when the escape key is down. It can be prevented by calling event.preventDefault. | |
onPause | function () => void | Event handler called when the dismiss timer is paused. This occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred. | |
onResume | function () => void | Event handler called when the dismiss timer is resumed. This occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused. | |
onSwipeStart | (event: SwipeEvent) => void | Event handler called when starting a swipe interaction. It can be prevented by calling event.preventDefault. | |
onSwipeMove | (event: SwipeEvent) => void | Event handler called during a swipe interaction. It can be prevented by calling event.preventDefault. | |
onSwipeEnd | (event: SwipeEvent) => void | Event handler called at the end of a swipe interaction. It can be prevented by calling event.preventDefault. | |
onSwipeCancel | (event: SwipeEvent) => void | Event handler called when a swipe interaction is cancelled. It can be prevented by calling event.preventDefault. |
Note: To display multiple toasts at the same time, you can update the TOAST_LIMIT
in use-toast.tsx
.