Loading...
Loading...
> Toast notification component for displaying temporary messages and alerts to users.
1import { Toaster, ToastProvider, Toast, ToastTitle, ToastDescription, ToastAction, ToastClose, ToastViewport } from "@/components/ui/toaster"
1import { Toast, ToastProvider, ToastTitle, ToastDescription, ToastClose, ToastViewport } from "@/components/ui/toaster";23function App() {4 return (5 <ToastProvider>6 <Toast id="toast-1">7 <div className="grid gap-1">8 <ToastTitle>Success</ToastTitle>9 <ToastDescription>Your changes have been saved.</ToastDescription>10 </div>11 <ToastClose />12 </Toast>13 <ToastViewport />14 </ToastProvider>15 );16}
1import {2 Toast,3 ToastProvider,4 ToastTitle,5 ToastDescription,6 ToastAction,7 ToastClose,8 ToastViewport,9} from "@/components/ui/toaster";1011<ToastProvider>12 <Toast id="1">13 <ToastTitle>Title</ToastTitle>14 <ToastDescription>Description</ToastDescription>15 <ToastAction altText="Action">Action</ToastAction>16 <ToastClose />17 </Toast>18 <ToastViewport />19</ToastProvider>
1<Toast id="simple">2 <ToastTitle>Notification sent</ToastTitle>3 <ToastClose />4</Toast>
1<Toast id="with-desc">2 <div className="grid gap-1">3 <ToastTitle>Changes saved</ToastTitle>4 <ToastDescription>5 Your profile has been updated successfully.6 </ToastDescription>7 </div>8 <ToastClose />9</Toast>
1<Toast id="with-action">2 <div className="grid gap-1">3 <ToastTitle>File deleted</ToastTitle>4 <ToastDescription>5 Your file has been moved to trash.6 </ToastDescription>7 </div>8 <ToastAction altText="Undo deletion">9 Undo10 </ToastAction>11 <ToastClose />12</Toast>
1<Toast id="error" variant="destructive">2 <div className="grid gap-1">3 <ToastTitle>Error</ToastTitle>4 <ToastDescription>5 Failed to save changes. Please try again.6 </ToastDescription>7 </div>8 <ToastClose />9</Toast>
1// Root layout or app component2import { ToastProvider, ToastViewport } from "@/components/ui/toaster";34export default function RootLayout({ children }) {5 return (6 <html>7 <body>8 <ToastProvider>9 {children}10 <ToastViewport />11 </ToastProvider>12 </body>13 </html>14 );15}
1// ToastViewport positioning (built-in)2<ToastViewport />34// Renders at:5// - top-0 on mobile (small screens)6// - bottom-0 right-0 on desktop7// - Max width: 384px (max-w-96)
| Prop | Type | Default | Description |
|---|---|---|---|
| Toast | Component | - | Root toast component. Accepts variant prop ('default' | 'destructive') |
| ToastProvider | Component | - | Required wrapper component that manages toast state |
| ToastTitle | Component | - | Toast title text with medium font weight |
| ToastDescription | Component | - | Toast description text with muted styling |
| ToastAction | Component | - | Action button component. Requires altText prop for accessibility |
| ToastClose | Component | - | Close button with X icon, positioned absolutely |
| ToastViewport | Component | - | Viewport container that positions toasts on screen |
| Toaster | Component | - | Complete toaster component with built-in provider |