Toast

A brief, non-blocking notice that appears and dismisses itself; renders in a portal.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add toast

Dependencies

What add toast installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

npm

@base-ui/[email protected]

Examples

1 examples · 1 component

States: success, warning, info and error

The type colors the left border (success, warning, info, error); neutral without a type. It appears, can be closed and dismisses itself.

API reference

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`ToastProvider` Manages the queue; wrap your app once. Accepts timeout and limit.	`—`	—
`Toaster` Portal and viewport where toasts stack.	`div`	—
`useToast()` Returns add, close, update and promise.	`hook`	—
`add(options)` title, description, type ('success' \| 'warning' \| 'info' \| 'error'; neutral without a type), timeout.	`—`	—

States

The states that apply to this component and their visual treatment.

State	Treatment
Enters	Appears in the viewport and is announced through aria-live.
Types	success, warning, info and error color the border; neutral without a type.
Manual close	The close button (with aria-label) dismisses it.
Dismissed	Leaves on its own when the timeout ends.

Accessibility

The viewport announces toasts to screen readers (aria-live policy); use priority: 'high' only for urgent notices.

Never make a toast the only way to reach a critical action: it is ephemeral. The close button has an aria-label and the state is communicated through text, not color alone.