Toast

An individual toast notification.

Examples

Default

Saved successfully

Dismiss notification

<Toast {...args} onDismiss={() => {}} />

Error

Unable to save

Dismiss notification

<Toast {...args} onDismiss={() => {}} />

Success

Saved successfully

Dismiss notification

<Toast {...args} onDismiss={() => {}} />

Warning

Storage almost full

Dismiss notification

<Toast {...args} onDismiss={() => {}} />

With Viewport

InfoSuccessWarningError

<ToastViewport>
  <HookStory />
</ToastViewport>

Auto Dismiss

Show auto-dismiss toast

<ToastViewport>
  <AutoDismissStory />
</ToastViewport>

With End Content

Show with action

<ToastViewport>
  <WithEndContentStory />
</ToastViewport>

Positions

topStarttopEndbottomStartbottomEnd

<PositionsStory />

API

Toast

An individual toast notification.

Prop	Type	Default	Description
autoHideDuration*	number	—	Auto-dismiss duration in milliseconds.
body*	ReactNode	—	Toast message content.
className	string	—	Additional CSS class names applied to the toast.
data-testid	string	—	Test ID applied to the toast.
endContent	ReactNode	—	Content rendered before the dismiss button.
isAutoHide*	boolean	—	Whether the toast auto-dismisses.
isExiting	boolean	false	Whether the toast is exiting.
isPaused	boolean	false	Whether the toast auto-dismiss timer is paused by its container.
onDismiss*	(reason: ToastDismissReason) => void	—	Called when the toast should be dismissed.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the toast element.
style	CSSProperties	—	Inline styles applied to the toast.
type*	"error" | "info" | "success" | "warning"	—	Toast tone.

ToastViewport

Toast provider and viewport. Mount once near the app root to enable toast notifications. Components below this provider can call `useToast()` to show toasts.

Prop	Type	Default	Description
children	ReactNode	—	App content that should receive the toast context.
className	string	—	Additional CSS class names applied to the viewport.
data-testid	string	—	Test ID applied to the viewport.
inset	Readonly<ToastViewportInset>	—	Custom viewport inset.
isTopLayer	boolean	true	Whether to promote the viewport to the CSS top layer using popover.
maxVisible	number	5	Maximum visible toast count.
position	"bottomEnd" | "bottomStart" | "topEnd" | "topStart"	'bottomEnd'	Toast stack position.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the viewport element.
style	CSSProperties	—	Inline styles applied to the viewport.