Toast

Feedback

Overlay

Toast notifications for user feedback and system messages.

Toast vs. Alert vs. Banner vs. Notification

Use Toast for ephemeral feedback that auto-dismisses — action confirmations ("Saved"), undo prompts, transient errors. Appears in a viewport corner without blocking interaction.

Alert — inline, persistent feedback inside a page region (form errors, AI insights)
Banner — page-wide strip, fixed to top/bottom (announcements, promos)
Notification — persistent item in a feed or tray (activity history)

Variants

Success, error, warning, and info notifications

With Actions

Add action buttons to toasts

Duration Control

Custom display duration

Props

Component API reference

Prop	Type	Default	Description
`title`	`string`	—	Toast title
`description`	`string`	—	Toast description
`variant`	`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`	`'default'`	Toast variant
`duration`	`number`	`5000`	Display duration in ms
`action`	`ReactNode`	—	Action button component

Usage

Import and implementation examples

import { useToast } from '@/components/ui/toast/use-toast'
import { Toaster } from '@/components/ui/toast/toaster'
import { ToastAction } from '@/components/ui/toast'
import { Button } from '@/components/ui/button'

export default function Example() {
 const { toast } = useToast()

 return (
 <>
 <Button
 onClick={() =>
 toast({
 variant: 'success',
 title: 'Success',
 description: 'Your changes have been saved.',
 })
 }
 >
 Show Toast
 </Button>

 {/* With action button */}
 <Button
 onClick={() =>
 toast({
 title: 'Update Available',
 action: <ToastAction altText="Update">Update</ToastAction>,
 })
 }
 >
 Toast with Action
 </Button>

 {/* Don't forget the Toaster in your layout */}
 <Toaster />
 </>
 )
}

Features

Built-in functionality

5 variants: Default, success, error, warning, info
Auto-dismiss: Configurable duration (default 5s)
Swipe to dismiss: Gesture support on mobile
Action buttons: Optional CTA in toasts
Stack management: Multiple toasts queue properly
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

role="status" for toast containeraria-live="polite" for notificationsaria-atomic="true" for updates

Keyboard Navigation

Key	Action
`Escape`	Dismiss toast
`Tab`	Focus action button

Notes

Screen reader announces new toasts
Swipe gestures have keyboard alternatives
Action buttons are focusable

Related Components

Alert Alert Dialog Notification