Toast

Non-blocking notifications powered by Radix Toast and the useToast hook.

Installation

Examples

Variants

Default, success, warning, and danger.

Notification

Your request was processed.

Saved!

Your changes have been saved.

Warning

Storage is almost full.

Error

Something went wrong.

With action

Add an action button inside the toast.

File deleted

report.pdf was removed.

API Reference

PropTypeDefaultDescription
titlestringPrimary message.
descriptionstringSecondary detail text.
variant'default'|'success'|'warning'|'danger''default'Visual style.
durationnumber4000Auto-dismiss duration in ms.
actionReactNodeAction button inside the toast.