Toast
Provider, notification surface, and hook for transient messages.
Add it to your project
Eject the complete toast group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject toastbash
npx toucan eject toastapp.tsx
import { Toast, ToastProvider, useToast } from '@/components/toucan/toast';Use when
An action result should be acknowledged without interrupting the current task.
Avoid when
The message is critical, persistent, or requires immediate input.
Example
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
ToastToastProvideruseToast
Toast
Props type: ToastProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
variant | "info" | "success" | "warning" | "danger" | 'info' | No | Semantic visual variant. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
ToastProvider
Props type: ToastProviderProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | React.ReactNode | — | Required | Content rendered inside the component. |
maxToasts | number | 5 | No | Maximum number of visible notifications. |
position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | 'top-right' | No | Placement of the component within the viewport. |
useToast
useToast() returns the toast, dismiss, and dismissAll actions from the nearest ToastProvider.
Type exports
ToastProps, ToastProviderProps
Accessibility
- The provider exposes a labelled live region.
- Warning and danger notifications use alert semantics.
Token families
toastcolor