Ravox KitOverlays
Toast
Call toast() from anywhere and put <Toaster /> once in the layout. Success, error, info, warning, loading and promise; action button (Undo); stacks in a fan, expands into a list on hover, pauses the timer and dismisses by dragging sideways.
Clique algumas vezes para empilhar; passe o mouse na pilha para abrir a lista. Alt+N leva o foco até ela.
Settings
Toggles
Examples
The types
Promise
Undo
Update in place
Installation
The command creates components/ui/toast.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add toastProps
| Prop | Type | Default | Description |
|---|---|---|---|
| toast(title, options) | (ReactNode, ToastOptions) => id | — | Shows a notification and returns the id. Also: toast.success, .error, .info, .warning and .loading. |
| toast.promise(p, messages) | (Promise | () => Promise, { loading, success, error }) => Promise | — | Shows loading and swaps to success or error when the promise settles. success and error can be functions of the result. |
| toast.dismiss(id?) | (id?) => void | — | Removes a notification. Without an id, removes all of them. |
| options.description | ReactNode | — | Second line, more muted. |
| options.action | { label, onClick } | — | A button (e.g. Undo). With an action, the notification stays at least 8 s. |
| options.id | string | number | — | Reusing the id updates in place (e.g. loading → done). |
| options.duration | number | 5000 | Time on screen in ms; Infinity stays until dismissed. |
| options.onDismiss | () => void | — | Called when the notification leaves (timeout, X, drag or dismiss). |
| <Toaster position> | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "bottom-right" | Where the stack sits. On mobile, always the full screen width. |
| <Toaster visibleToasts duration closeButton expand> | number / number / boolean / boolean | 3 / 5000 / true / false | How many show in the fan, the default duration, the X on all of them and the list always open. |