ComponentsOverlays & feedback

Toast

Reports the result of an action without interrupting: "Post published · View", "Moved to trash · Undo". Six tones with a thin status edge, actions, in-place updates by id, promise tracking, and a stack where only the front toast blurs.

sonner (wrapped — import only from the kit) components/toast.tsx, styles/overlays.csstheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { toast, Toaster } from "@vamos-ui/react";

// once, near the app root (App shell already includes it)
<Toaster />

toast.success("Post published", { action: { label: "View", onClick: openPost } });

Critical information ("Couldn't save") must not live only in a toast — show an inline Alert too.

Only the first mounted Toaster renders, so a page-level one next to the App shell's never doubles toasts.

Import toast from @vamos-ui/react, never from the engine package, so it can be swapped later.

Examples

Undo (CRM)

A toast with an action stays at least 6 seconds. Undo should fully reverse the change.

Elif Demir
Can Yıldız
Ayşe Kaya
Mert Aksoy

toast(title, options) · toast.success · .info · .warning · .danger · .loading

Prop	Type	Default
`title` Short past-tense result ("Leave approved").	`ReactNode`	`—`
`description` One line of detail.	`ReactNode`	`—`
`action` One follow-up ("Undo", "View").	`{ label: ReactNode; onClick: () => void }`	`—`
`cancel` A secondary, dismissing button.	`{ label: ReactNode; onClick?: () => void }`	`—`
`duration` neutral, success, info 4 s · warning 6 s · danger 8 s · loading until updated. Infinity keeps it.	`number`	`4000 / 6000 / 8000 / ∞`
`id` Same id updates the toast in place.	`string`	`—`
`important` Announce assertively (role="alert"). Danger toasts always are.	`boolean`	`false`
`closeButton` × on this toast.	`boolean`	`false`
`onDismiss / onAutoClose` Lifecycle callbacks.	`() => void`	`—`
`→ returns` The toast id.	`string`	`—`

toast.promise(promise, messages)

Prop	Type	Default
`loading` Shown while pending.	`ReactNode`	`—`
`success` Shown on resolve.	`ReactNode \| (data) => ReactNode`	`—`
`error` Shown on reject.	`ReactNode \| (error) => ReactNode`	`—`
`→ returns` The original promise (handle its rejection).	`Promise<T>`	`—`

toast.dismiss(id?)

Prop	Type	Default
`id` Dismiss one toast, or all without an id.	`string`	`—`

Toaster

Prop	Type	Default
`position` Logical — end is the left edge in RTL.	`"bottom-end" \| "bottom-start" \| "bottom-center" \| "top-end" \| "top-start" \| "top-center"`	`"bottom-end"`
`mobilePosition` Below 640px, away from the keyboard and bottom bars.	`same`	`"top-center"`
`max` Visible toasts before they stack.	`number`	`3`
`expand` Always show the stack expanded.	`boolean`	`false`
`closeButton` × on every toast.	`boolean`	`false`
`hotkey` Focuses the toast region.	`string[]`	`["altKey", "KeyT"]`
`offset` Distance from the viewport edge.	`number \| string`	`24px`
`labels` Dictionary namespace "toast".	`{ region?: string; close?: string }`	`—`

Time tracker

Tooltip