Toast
React Toast components are used to show short, non-blocking messages that inform users about system events or actions. They are commonly used for success confirmations, error messages, warnings, and real-time updates.
This Toast component supports multiple variants, optional titles, action buttons, undo behavior, and message-style notifications with avatars. It is designed for quick feedback.
Your profile has been updated.
Payment Error
Your transaction could not be completed.
Item moved to trash.
E
Emily Stone
Sent you a message
Just now
Installation
Usage
Basic Toast
import { Toast } from "@/registry/core/toast";
export default function Demo() {
return (
<Toast
variant="success"
description="Your settings have been saved successfully."
/>
);
}Toast With Title & Actions
Use this layout when the message requires clear structure and user actions.
<Toast
title="Payment Failed"
description="Your card was declined. Please try again."
variant="error"
actions={{
primary: {
label: "Retry",
onClick: () => console.log("Retry clicked")
},
dismiss: {
label: "Cancel",
onClick: () => console.log("Dismiss clicked")
}
}}
/>Toast With Undo
Use this pattern for quick, reversible actions. Works only when no title is present.
<Toast
description="Item deleted."
variant="warning"
undoAction={() => console.log("Undo clicked")}
/>Avatar Toast (Message-style)
Used for chat messages or social notifications.
import { AvatarToast } from "@/registry/core/toast";
<AvatarToast
name="Alex Carter"
description="Sent you a message"
image="/images/user.jpg"
status="online"
time="2 minutes ago"
/>;Variants
<Toast variant="success" description="Operation completed." />
<Toast variant="error" description="Something went wrong." />
<Toast variant="warning" description="Check your input again." />
<Toast variant="info" description="New update available." />
<Toast variant="message" description="1 new message." />API Reference
Toast
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "success", "error", "info", "warning", "message" | — | Controls icon and color theme |
description | string | — | Main message text |
title | string | — | Optional title for more structured toasts |
undoAction | () => void | — | Shows an “Undo” button when no title is present |
actions | { primary: { label: string; onClick?: fn }, dismiss?: { label: string; onClick?: fn } } | — | Shows action buttons when title is present |
AvatarToast
| Prop | Type | Description |
|---|---|---|
name | string | Sender name |
description | string | Message body |
image | string | Avatar image source |
status | "none", "online", "offline", "busy" | Avatar status indicator |
time | string | Timestamp label |
Accessibility
- Dismiss buttons include visually hidden labels for screen readers.
- Buttons follow standard focus handling and keyboard navigation.
- Variant icons use meaningful symbols for visual association.
- Layout works for both compact and content-rich messages
Notes
- If a
titleis present, the layout switches to a vertical content stack. - For simple toasts (no title),
Undoappears inline on the right. - Icon colors are determined by
variant. - Designed to work inside a toast stack or toaster system