Toast
Transient notification surfaced via the useToast hook
Category: overlay · WCAG 2.2-AA · overlay, notification, feedback
Variants
- default
- success
- warning
- destructive
States
- visible
- dismissing
- gone
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Title text for the component. |
description | string | — | Supporting description text. |
variant | 'default' | 'success' | 'warning' | 'destructive' | default | Severity tone: `default` (neutral), `success`, `warning` or `destructive`. Sets the icon and the accent colour. Unlike Badge/Tag/Notification this is a private union, not `ToneInput` — the canonical `danger`/`neutral` spellings are not accepted here. |
duration | number | 5000 | How long (ms) the toast stays visible before auto-dismiss. |
Design tokens
--cascivo-color-surface-overlay--cascivo-color-success--cascivo-color-warning--cascivo-color-destructive--cascivo-radius-md--cascivo-z-toast
When to use
- Confirming that a background or just-completed action succeeded or failed (e.g. "Saved")
- Brief, transient feedback that should auto-dismiss without interrupting the task
- Non-blocking notifications that can stack and disappear on their own
When not to use
- A persistent, inline message tied to a specific region of the page — use Alert
- Feedback that requires the user to acknowledge or decide before continuing — use Modal or AlertDialog
How to build an accessible Toast in React →
Examples
Trigger
const { toast } = useToast()
toast({ title: "Saved", variant: "success" })