UI component
Toast
Toast delivers ephemeral feedback through a single Toaster mount and a toast() dispatcher with success, error, warning, info, loading, and promise variants.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { Toaster, toast } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| position | Places the toaster in one of the six standard corners; defaults to bottom-right. |
| theme | Switches between light, dark, and system rendering without pulling in next-themes. |
| richColors | Opts into sonner rich color backgrounds when the default neutral surface is not desired. |
| closeButton | Toggles the per-toast close button; kept on by default for accessibility. |
| toastOptions | Forwards consumer overrides for class names, duration, and per-toast defaults; merges over package styles. |
| toast() | Dispatcher with .success, .error, .warning, .info, .loading, .message, .promise, and .dismiss methods exported alongside Toaster. |
Accessibility
The Toaster mounts a region landmark with a polite live region, and each toast renders a focusable close button when the closeButton prop is enabled.
Integration notes
Mount a single Toaster at the app root and call toast() from anywhere. Use toast.promise to drive multi-state feedback for async work.