Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA stack of toast notifications with tones, optional actions, auto-dismiss that pauses on hover or focus, and Escape to dismiss.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
toasts | ToastMessage[] | - | Controlled list. New toasts go at the end. |
defaultToasts | ToastMessage[] | [] | Initial list when uncontrolled. |
onToastsChange | (toasts: ToastMessage[]) => void | - | Called with the remaining list after a dismissal. |
durationMs | number | 5000 | Time before each toast closes. 0 keeps toasts until dismissed. |
label | string | "Notifications" | Accessible name of the region. |
Also accepts all <section> props except children.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Stable id. |
title | string | - | Headline. |
description | string | - | Optional detail. |
tone | "info" | "success" | "error" | "info" | Sets the icon and colors. |
actionLabel | string | - | Text of the action button. |
onAction | () => void | - | Called when the action is clicked. Both actionLabel and onAction are needed to show the button. |
The stack does not position itself. Place it with classes, for example fixed end-4 bottom-4. Each toast counts down separately, and hovering or focusing the stack pauses all of them. Pressing Escape inside a toast dismisses it. The newest title is announced through a polite live region. Enter and exit animations fall back to fades with reduced motion.