Components / UI components / Feedback
FeedbackExperimental alpha

Toast

A controlled temporary notification with dismissal and retained action alternatives.

Toast preview

Loading example…

Interactions use local sample data.

Usage and props

Own notification identity and state. Retain important results elsewhere; provide another route to actions after expiry. One provider and viewport serve each notification area.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

ToastProvider · Toast: open/onOpenChange/tone/type/duration · ToastAction: altText · ToastClose · ToastViewport
How state and callbacks work

These are the main props for the example. The package's TypeScript declarations include the full API.

Customize and use with a keyboard