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.
Installation
Install the component using the Tailgrids CLI.
npx @tailgrids/cli add toastAnatomy
Import the component and pass the required props.
import { Toast, AvatarToast } from "@/registry/core/toast";
export const ToastExample = () => (
<Toast
variant="success"
message={{
title: "Success",
description: "Your changes have been saved."
}}
/>
);Usage
Basic Toast
A simple toast notification with a description, used for brief updates.
Your profile has been updated.
Toast With Title & Actions
A structured toast layout that includes a title, description, and action buttons for user interaction.
Payment Error
Your transaction could not be completed.
Note:
When providing a title via the message object, the layout switches to a vertical content stack to accommodate more information. You can use children to render action buttons.
Toast With Undo
A specialized toast for reversible actions that includes an inline 'Undo' button.
Item moved to trash.
Note:
For simple toasts (no title), the Undo button appears inline on the right side.
Avatar Toast
A message-style toast that includes an avatar, sender name, message description, and timestamp. Ideal for chat or social notifications.
Random User
Sent you a message
Just now
Variants
The Toast component supports five predefined variants: success, error, info, warning, and default.
Operation completed.
Something went wrong.
Check your input again.
New update available.
1 new message.
Note:
Icon colors and icons are automatically determined by the variant prop.
API Reference
Toast
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "success", "error", "info", "warning", "default" | "default" | Controls icon and color theme |
message | string | { title: string; description: string; } | — | Main message content. Can be a string or an object with title. |
undoAction | () => void | — | Shows an “Undo” button (only when message is a string) |
hideIcon | boolean | false | Hides the status icon |
icon | React.ReactNode | — | Custom icon to override the default variant icon |
children | React.ReactNode | — | Custom content rendered below the message (e.g. for action buttons) |
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.
Note: The Toast component is designed to work inside a toast stack or toaster system for managing multiple notifications.