Toast
A brief, non-intrusive notification that appears temporarily.
Introduction
Toasts deliver brief notifications to users without interrupting their workflow. They support multiple themes, auto-dismiss, and can be positioned anywhere on screen.
Installation
import { Toast, ToastTitle, ToastDescription, ToastContainer, ToastProvider, useToast } from '@/components/ui/toast';Usage
<Toast onDismiss={() => {}}>
<ToastTitle>Notification</ToastTitle>
<ToastDescription>Your changes have been saved.</ToastDescription>
</Toast>Examples
Default
Notification
This is a default toast message.
import { Toast, ToastTitle, ToastDescription } from '@/components/ui/toast';
export default function Component() {
return (
<Toast onDismiss={() => {}}>
<ToastTitle>Notification</ToastTitle>
<ToastDescription>This is a default toast message.</ToastDescription>
</Toast>
);
}Statuses
Figma leads every toast with a 24px status glyph. Status colours use semantic tokens, so a status reads correctly on the default (white) toast — not on a solid themed one.
Application submitted
Reference number MH-2026-44815.
Session expiring
You will be signed out in two minutes.
Upload failed
The file exceeds the 5 MB limit.
Aadhaar verification pending
This usually takes under a minute.
Uploading documents
Please keep this tab open.
import { Toast, ToastDescription, ToastTitle } from '@/components/ui/toast';
export default function Component() {
return (
<div className='flex flex-col gap-3'>
<Toast status='success'>
<ToastTitle>Application submitted</ToastTitle>
<ToastDescription>Reference number MH-2026-44815.</ToastDescription>
</Toast>
<Toast status='warning'>
<ToastTitle>Session expiring</ToastTitle>
<ToastDescription>You will be signed out in two minutes.</ToastDescription>
</Toast>
<Toast status='error'>
<ToastTitle>Upload failed</ToastTitle>
<ToastDescription>The file exceeds the 5 MB limit.</ToastDescription>
</Toast>
<Toast status='info'>
<ToastTitle>Aadhaar verification pending</ToastTitle>
<ToastDescription>This usually takes under a minute.</ToastDescription>
</Toast>
<Toast status='loading'>
<ToastTitle>Uploading documents</ToastTitle>
<ToastDescription>Please keep this tab open.</ToastDescription>
</Toast>
</div>
);
}Themes
Solid themed toasts are an IndiaCN addition; UX4G's toast is always a white card distinguished by its status icon.
Default
A default styled toast message.
Primary
A primary themed toast.
Success
Action completed successfully.
Error
Something went wrong.
Warning
Please review before proceeding.
import { Toast, ToastTitle, ToastDescription } from '@/components/ui/toast';
export default function Component() {
return (
<div className="flex w-full flex-col gap-3">
<Toast theme="success" onDismiss={() => {}}><ToastTitle>Success</ToastTitle><ToastDescription>Done!</ToastDescription></Toast>
<Toast theme="danger" onDismiss={() => {}}><ToastTitle>Error</ToastTitle><ToastDescription>Failed.</ToastDescription></Toast>
</div>
);
}Simple
A toast without a title.
Your file has been uploaded.
import { Toast, ToastDescription } from '@/components/ui/toast';
export default function Component() {
return <Toast><ToastDescription>Your file has been uploaded.</ToastDescription></Toast>;
}API Reference
Toast
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'success' | 'warning' | 'info' | 'error' | 'loading' | — | Leading 24px status glyph, per UX4G |
theme | 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'default' | Solid surface colour. An IndiaCN addition; UX4G's toast is always white |
onDismiss | () => void | — | Dismiss callback; shows the close button |
ToastContainer
| Prop | Type | Default | Description |
|---|---|---|---|
position | top-left | top-right | top-center | bottom-left | bottom-right | bottom-center | bottom-right | Screen position |
useToast
Hook for programmatic toast management. Returns { toast, dismiss, toasts }.