Toast

A Sonner-based toast — call toast() from anywhere, no local state needed. Mount one <Toaster /> near your app's root (inside ThemeProvider, since it reads light/dark mode from it) — this site already does, so every button below is a genuinely working demo.

import { ThemeProvider, Toaster, toast, Button } from "@pompeitech/vesuvius-ui";
 
function App() {
  return (
    <ThemeProvider>
      {/* ... */}
      <Toaster />
    </ThemeProvider>
  );
}

Default

Variants

API

toast(message, options)

Argument	Type	Description
`message`	`ReactNode`
`options.description`	`ReactNode`
`options.action`	`{ label: string, onClick: () => void }`	Renders an inline action button on the toast.
...rest		Everything Sonner's own `toast()` accepts (`duration`, `id`, `onDismiss`, `position` overrides, ...) — this is a direct re-export, not a wrapper that limits the API.

toast.success / toast.error / toast.warning / toast.info — same signature as toast(), pre-styled with the matching semantic color and icon.

Toaster — every prop Sonner's own <Toaster> accepts (position, richColors, closeButton, duration, ...), forwarded straight through; pre-wired to read light/dark mode from the ancestor ThemeProvider so toasts always match the active theme without a theme prop of your own.

Accessibility

Sonner renders toasts in an aria-live region, so screen readers announce new ones without the page needing to shift focus. Keep message concise and put anything non-essential in description — a screen reader announces both, but a long message alone is harder to parse at a glance for sighted users too.