Toast

Updated: June 30, 2026

The Toast component displays temporary notification messages that automatically dismiss after 6 seconds. 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="alert" for screen reader announcements
aria-live="assertive" for immediate notification
Keyboard-accessible close button with tooltip

API reference

Toast element

Prop	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	—

Toaster element

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

ComponentsTimeline

ComponentsToggleButton

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club