Usage
Hook for showing toast notifications from anywhere in your component tree. Returns a function that accepts toast options and shows the notification. Works automatically with LayerProvider or self-mounts a fallback viewport.
tsimport {useToast} from '@astryxdesign/core/Toast'
Best practices
| Guidance | Practices |
|---|---|
| Do | Use for transient success/error feedback that does not require user action. |
| Do | Set uniqueID to deduplicate toasts from rapid user actions. |
| Don't | Use for critical errors that require acknowledgment; use AlertDialog instead. |
| Don't | Call useToast in the same component that renders LayerProvider; it must be called from a child component inside the provider. |
Returns
| Field | Type | Description |
|---|---|---|
| showToast | (options: ) => () => void | Show a toast notification. Returns a dismiss function. Options include body (ReactNode), type ("info" | "error"), isAutoHide, autoHideDuration, endContent, uniqueID, and collisionBehavior. |
Examples
Common configurations, variations, and states.Imperative toast notifications triggered with useToast and rendered in the toast viewport.
Use with shadcn
Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx. How compatibility works.
This install URL expires with the draft preview.Install the editable showcase compositionbashnpx shadcn@latest add https://astryx-pxujcw3w9-fbopensource.vercel.app/r/hooks/use-toast.json
bashnpx shadcn@latest add https://astryx-pxujcw3w9-fbopensource.vercel.app/r/showcases/toast/default.json