Toast
Toasts are transient messages for feedback after user actions.
Examples
Types
With description
With action
Promise
Custom duration
Overview
Toasts provide brief, non-blocking feedback about an operation. They appear temporarily and dismiss automatically. Built on Sonner with custom styling.
tsx
import { toast } from "@rogo-technologies/ui/toast";
toast("Document saved");Usage
Setup
Add Toaster once at the root of the app — it renders the toast container.
tsx
import { Toaster } from "@rogo-technologies/ui/toast";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Toaster />
</body>
</html>
);
}Types
| Type | Method | Icon | Use case |
|---|---|---|---|
| Default | toast() | None | General messages |
| Success | toast.success() | Checkmark (green) | Successful operations |
| Error | toast.error() | Exclamation (red) | Failed operations |
| Warning | toast.warning() | Triangle (amber) | Caution messages |
| Info | toast.info() | Info circle (green) | Informational messages |
| Loading | toast.loading() | Spinner | In-progress operations |
tsx
toast("Document saved");
toast.success("Changes saved successfully");
toast.error("Failed to save changes");
toast.warning("Your session will expire soon");
toast.info("New version available");
toast.loading("Uploading file...");With description
tsx
toast.success("File uploaded", {
description: "document.pdf has been uploaded to your workspace.",
});With action
The toast closes when the action is clicked.
tsx
toast("Message archived", {
action: {
label: "Undo",
onClick: () => toast.success("Message restored"),
},
});
// Or render custom JSX:
toast("File deleted", {
action: (
<Button size="xs" onClick={() => restoreFile()}>
Undo
</Button>
),
});Promise
toast.promise() automatically transitions through loading, success, and error states.
tsx
toast.promise(saveChanges(), {
loading: "Saving changes...",
success: "Changes saved successfully",
error: "Failed to save changes",
});
// Dynamic messages from the resolved value:
toast.promise(fetchData(), {
loading: "Loading data...",
success: (data) => `Loaded ${data.count} items`,
error: (err) => `Error: ${err.message}`,
});Duration
Toasts auto-dismiss after 4 seconds by default.
tsx
toast.info("Important notice", { duration: 10000 });
toast.warning("Action required", { duration: Infinity });Dismissing and updating
tsx
const toastId = toast.loading("Uploading...");
toast.dismiss(toastId);
toast.dismiss(); // all toasts
toast.success("Upload complete!", { id: toastId }); // updates same toastPosition
tsx
<Toaster position="bottom-right" />
// "top-left" | "top-center" | "top-right"
// "bottom-left" | "bottom-center" | "bottom-right"API
toast() options
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | — | Secondary text below the title. |
duration | number | 4000 | Auto-dismiss time in milliseconds. |
action | { label: string, onClick: () => void } | — | Primary action button. |
cancel | { label: string, onClick: () => void } | — | Secondary cancel button. |
id | string | — | Custom ID for the toast. |
icon | ReactNode | — | Custom icon to display. |
dismissible | boolean | true | Whether the toast can be dismissed. |
onDismiss | () => void | — | Callback when toast is dismissed. |
onAutoClose | () => void | — | Callback when toast auto-closes. |
Toaster props
| Prop | Type | Default | Description |
|---|---|---|---|
position | string | "top-center" | Position of toast container. |
expand | boolean | false | Expand toasts by default. |
visibleToasts | number | 3 | Maximum visible toasts. |
closeButton | boolean | true | Show close button on toasts. |
richColors | boolean | false | Use colorful backgrounds for types. |
toastOptions | object | — | Default options for all toasts. |
Guidelines
Do
- Use toasts for transient, non-critical feedback
- Keep messages brief and actionable
- Use appropriate types (success, error, etc.) for context
- Use
toast.promise()for async operations to show progress - Provide an undo action for destructive operations when possible
Don't
- Don't use toasts for critical information that requires acknowledgment — use a dialog instead
- Don't show multiple toasts in rapid succession — batch or debounce them
- Don't use toasts for persistent information — use banners or alerts
- Don't make toast messages too long — keep them scannable
- Don't rely solely on toasts for error handling — ensure errors are also logged