Toast

overlay

Contextual notifications that stack bottom-right and auto-dismiss. Four variants — info, success, warning, error — with an imperativeuseToast API driven by a provider context.

Preview

Scale1.00

Usage

import { ToastProvider, useToast } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

// Wrap your app (or a subtree) with the provider
<ToastProvider>
  <App />
</ToastProvider>

// Inside any descendant component
const { createToast } = useToast();

createToast({
  message: 'Settings saved.',
  variant: 'success',
  duration: 5000,
});

Props

Name	Type	Default	Description
ToastProvider
`children`	`JSX.Element`	--	Application subtree that can access the toast API
ToastOptions (passed to createToast)
`message`	`string \| JSX.Element`	--	Toast content
`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Visual variant
`duration`	`number`	`5000`	Auto-dismiss in ms. Set to `0` to disable
useToast() return value
`createToast`	`(options: ToastOptions) => string`	--	Show a toast; returns its id
`dismissToast`	`(id: string) => void`	--	Programmatically dismiss a toast

Accessibility

Live regions: Info, success, and warning toasts render in an aria-live="polite" region (role="status"). Error toasts render in an aria-live="assertive" region (role="alert").
Dismiss: Each toast has a dismiss button with aria-label="Dismiss notification" (or "Dismiss error notification" for errors).
Icons: Variant icons are decorative (aria-hidden="true").
Motion: Entry and exit animations honor prefers-reduced-motion.

Do / Don't

Do

Use toasts for transient feedback after user actions (save, delete, send). Keep messages brief and actionable.

Don't

Don't use toasts for critical errors that require user action to resolve. Use a Modal or inline alert instead.