Live demo
Click any variant to fire a toast. Toasts stack and auto-dismiss after 4 seconds. Error toasts are persistent — dismiss manually.
Variants
SuccessConfirms a completed action. Use after saves, publishes, or successful operations. Auto-dismisses (4s).ErrorSignals a failure that needs attention. Persistent by default — do not auto-dismiss errors the user hasn't read.WarningDraws attention to a condition that may cause issues. Auto-dismisses (4s).InformationProvides neutral context or guidance. Optionally includes an action link. Auto-dismisses (4s).NeutralFor low-signal confirmations: settings saved, clipboard copied. Shortest auto-dismiss cadence.Anatomy
Left accent3px solid border in the variant color — the primary visual signal at a glance.IconVariant-specific icon in the accent color. Reinforces the semantic meaning.TitleOptional. Use for toasts where the action name and the outcome are different things.MessageRequired. One or two lines max. Be specific: "Button v2.3 published" not "Success."ActionOptional inline link. One action only — "View guide", "Undo", "Retry".Dismiss (×)Always shown. Click to remove immediately.Behaviour
duration4000ms — Auto-dismiss delay. Pass 0 for persistent (recommended for errors).positionbottom-right — Fixed at bottom: 24px, right: 24px. Stacks upward when multiple toasts are visible.stackingFIFO — Toasts stack oldest-on-top. Each has its own dismiss timer.z-index1100 — Renders above modals (1000) so toasts remain visible when a modal is open.API
Wrap your app (or the relevant subtree) in ToastProvider, then call useToast() to fire toasts from any child component.
messagestringThe notification text.titlestring?Optional bold heading above the message.variantToastVariant?success | error | warning | information | neutral. Default: neutral.durationnumber?Auto-dismiss delay in ms. 0 = persistent. Default: 4000.action{ label, onClick }?Inline action button rendered below the message.idstring?Stable ID to prevent duplicate toasts (e.g., on rapid re-fires).Usage guidance
DoUse toast for system feedback after user-initiated actions (save, delete, publish).DoKeep messages under two lines. One clear sentence is almost always enough.DoMake error toasts persistent. Users need time to read and act on failures.Don'tUse toast as the only feedback for a destructive action — always confirm with a modal first.Don'tStack more than 3–4 toasts. If many things need to fire, consider a notification drawer instead.Don'tPut navigation or multi-step instructions in a toast — use an alert or page-level banner.Tokens used
bg/baseToast backgroundborder/subtleOuter border (all sides)border-width/baseOuter border weight (1px)status/successLeft accent and icon — success variantstatus/errorLeft accent and icon — error variantstatus/warningLeft accent and icon — warning variantstatus/informationLeft accent and icon — information variantborder/baseLeft accent and icon — neutral varianttext/baseTitle texttext/subtleMessage text, dismiss icon, neutral iconbg/faintDismiss button hover backgroundradius/lgToast corner radius (12px)space/4Internal padding (16px)space/3Icon-to-content gap (12px)space/6Viewport inset bottom and right (24px)space/2Gap between stacked toasts (8px)