Feedback
Toast
A compact notification card with a status icon, a message and an optional dismiss button. Presentational: you own when it shows and hides.
- Source
- src/components/ui/toast.tsx
- Figma
- Toast · variant (info, success, warning, error).
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Toast } from "@/components/ui/toast";When to use
- Brief confirmation after an action: saved, copied, invited, deleted.
- Non-blocking errors that need a mention but no immediate decision.
- Render it in a fixed container in your layout (for example bottom right) and drive it from state, as in the examples.
- For information that must stay visible until resolved, use Alert.
- For anything requiring a choice, use Dialog.
- Do not rely on a toast as the only record of a failure; people can miss it.
Examples
Dismissible
Pass onDismiss to show a close button. Hiding it is up to your state.
Show and auto-dismiss
Toast has no timer of its own. Start one in the click handler and clear it on dismiss. In an app, render the toast in a fixed container in your layout.
Stacking several
Keep a small list in state, cap it at three and remove each one after five seconds.
API reference
Toast
Extends native div attributes. It has no queue, timer, portal or positioning: it renders exactly where you place it. Wire it to your own state, or adapt it for a toast library.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "info" | "success" | "warning" | "error" | "info" | Color of the status icon. |
| children | React.ReactNode | - | The message. |
| onDismiss | () => void | - | Shows a trailing close button and calls this when it is clicked. |
| className | string | - | Merged onto the card. It is w-fit with a 256px minimum width by default. |
Accessibility
- Renders with role="status", so screen readers announce the message politely when it is inserted.
- Keep the live container mounted and insert toasts into it; content present on first render is not announced by every screen reader.
- The dismiss button is a native button with aria-label="Dismiss".
- If you auto-dismiss, allow at least four or five seconds and keep important errors on screen until dismissed.