Toast – Once UI

The Toast component displays temporary notification messages that automatically dismiss after 6 seconds, or after their duration. The countdown pauses while a toast is hovered or has focus. It's typically used through the ToastProvider context, but can also be used standalone.

Using Toasts

For most use cases, use the useToast hook from ToastProvider instead of rendering Toast components directly. The provider handles positioning, stacking, and lifecycle management automatically.

Variants

Toast supports four variants: success for positive feedback, danger for errors, warning for cautionary messages, and info for informational notices.

Variants

Your changes have been saved successfully!

Failed to save changes. Please try again.

Your session is about to expire.

New update available. Refresh to see the latest.

<Toast variant="success">
  Your changes have been saved successfully!
</Toast>
<Toast variant="danger">
  Failed to save changes. Please try again.
</Toast>
<Toast variant="warning">
  Your session is about to expire.
</Toast>
<Toast variant="info">
  New update available. Refresh to see the latest.
</Toast>

With actions

Add interactive elements like buttons to allow users to take action on the notification.

With action

Connection failed. Check your network.

Retry

<Toast 
  variant="danger"
  action={
    <Button size="s">
      Retry
    </Button>
  }
>
  Connection failed. Check your network.
</Toast>

Without icon

Hide the default variant icon by setting icon={false}.

Without icon

Task completed

<Toast variant="success" showIcon={false}>
  Task completed
</Toast>

Toaster

Automatic rendering

You don't need to manually render the Toaster component. It's automatically included when you wrap your app with ToastProvider. See the ToastProvider documentation for setup instructions.

The Toaster component manages multiple toast notifications, handling positioning, stacking animations, and portal rendering. It's automatically included when using ToastProvider.

The Toaster:

Renders toasts in a fixed position at the bottom center of the screen
Stacks multiple toasts with scale and opacity animations
Uses React portals to render outside the normal DOM hierarchy
Limits width to 32rem for optimal readability

Accessibility

Toast components include proper ARIA attributes:

role="status" with aria-live="polite" for success, info and warning, so the message is announced without interrupting
role="alert" (assertive) for danger only
The countdown pauses while the toast holds focus, so there is time to reach its action
Keyboard-accessible close button with tooltip

API reference

Toast element

	Type	Default
className	string	—
variantrequired Severity, which sets the colour and the icon.	successdangerwarninginfo	—
showIcon Show the icon for the variant.	boolean	true
onClose Called when it is dismissed.	() => void	—
action A control in the toast — undo, retry, view.	React.ReactNode	—
children	React.ReactNode	—
duration Milliseconds before it closes, paused while hovered or focused. Infinity keeps it up until it is closed.	number	6000

Toaster element

	Type	Default
toasts	{ id: string; variant: 'success' \| 'danger' \| 'warning' \| 'info'; message: ReactNode; action?: ReactNode; duration?: number }[]	—
removeToast	(id: string) => void	—