Toast
Transient notifications anchored to a corner of the viewport
import { Toaster, toast } from "@plexui/ui/components/Toast";Render <Toaster /> once near the root of your app, then call toast(...) from any handler. Toast is built on sonner — its full API (toast.promise, toast.loading, toast.dismiss, toast.custom) is re-exported as-is.
Examples
Overview
Variants
Description
Action
Promise
Long content
Compact
Persistent
Reference
<Toaster />
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "top-center" | Where toasts anchor on the viewport |
duration | number | 3000 | Default auto-dismiss duration in ms |
offset | string | number | { top?; right?; bottom?; left? } | — | Distance from the viewport edge |
gap | number | — | Gap between stacked toasts in px |
Remaining sonner Toaster props (expand, visibleToasts, hotkey, dir, swipeDirections, etc.) are forwarded untouched.
toast
Re-exported from sonner. The full surface — toast(), .success, .error, .warning, .info, .message, .loading, .promise, .dismiss, .custom — is available with full TypeScript inference.
Types
Action, ExternalToast, and ToastT are re-exported so you can type helpers without importing from sonner directly.
Theme sync
<Toaster /> reads data-theme on <html> on mount and observes changes via MutationObserver. Toggling light ↔ dark rethemes toasts that are already on screen — no next-themes dependency.