Toast
A brief, temporary notification. Supports status variants with matching icons and auto-dismisses after 5 seconds. Built on Radix UI Toast.
Default
Status Variants
Description Only
Usage
Use Toasts for temporary, non-blocking feedback after user actions (save, delete, error).
Toasts auto-dismiss after 5 seconds. Up to 3 can stack simultaneously.
The status prop automatically applies the correct color, border, and icon from the shared status system.
For persistent inline feedback, use the Alert component instead.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "info" | "success" | "warning" | "danger" | — | Applies status color, border, and icon |
| title | string | — | Toast title (bold) |
| description | string | — | Toast body text |
| variant | "default" | "info" | "success" | "warning" | "danger" | "destructive" | "default" | Direct variant override (prefer status) |
| action | ToastActionElement | — | Optional action button |