Alert

Controlled toast

Open/close a toast alert with external state.

API

Prop	Type	Default	Description
variant	"soft" \| "outlined" \| "filled"	soft	Surface style.
tone	"default" \| "success" \| "warning" \| "destructive"	default	Semantic color.
toast	boolean	false	When true, renders as a portaled toast instead of inline.
open	boolean	true	Controls visibility.
placement	"top-left" \| "top-right" \| "top-center" \| "bottom-left" \| "bottom-right" \| "bottom-center"	top-right	Fixed corner when `toast` is true.
duration	number	5000	Auto-close delay (ms) in toast mode; 0 disables.
persistent	boolean	false	Toast mode only — disables auto-close and outside-click dismiss.
pauseOnHover	boolean	true	Pauses auto-close while hovered in toast mode.
live	"assertive" \| "polite"	assertive	Inline default is assertive; toast default is polite.
title	React.ReactNode	—	Bold heading line.
action	React.ReactNode	—	Optional action slot below the description.
icon	React.ReactNode \| false	—	Override the tone icon, or false to hide.
dismissible / onDismiss	boolean / () => void	—	Close button; defaults to true in toast mode.