Components
Toast

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.