Toast

Temporary notification that appears in the corner. Dismisses automatically. Use the useToast hook to trigger from anywhere in the tree.

Setup

// Wrap your app (or layout) once
<ToastProviderWithHook>
  {children}
</ToastProviderWithHook>

// Then call from any component
const { toast } = useToast();
toast({ title: 'Done', variant: 'success' });

Examples

With action

Props

Toast

title

string

Bold heading line.

description

string

Secondary detail text.

variant= 'default'

'default' | 'success' | 'warning' | 'error'

Sets the border accent and icon.

duration= 4000

number

Auto-dismiss delay in milliseconds.

action

ReactNode

Optional action rendered below the description.

Prop	Type	Default	Description
title	string	—	Bold heading line.
description	string	—	Secondary detail text.
variant	'default' \| 'success' \| 'warning' \| 'error'	'default'	Sets the border accent and icon.
duration	number	4000	Auto-dismiss delay in milliseconds.
action	ReactNode	—	Optional action rendered below the description.

ToastAction

altText*

string

Describes the action for screen readers in case the toast has already dismissed.

onClick

() => void

Called when the action button is clicked.

children*

ReactNode

Button label.

Prop	Type	Default	Description
altText*	string	—	Describes the action for screen readers in case the toast has already dismissed.
onClick	() => void	—	Called when the action button is clicked.
children*	ReactNode	—	Button label.

PreviousSpinner NextAvatar