Toast
Toast notifications for transient feedback, with semantic variants, descriptions, action buttons, promise integration, and persistent toasts.
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, and 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
API
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. theme, richColors, toastOptions, style and closeButton are left out of ToasterProps, because Plex sets them for its tokens, icons and theme sync.
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, with no next-themes dependency.
Styling
Toast has no component tokens of its own. It reads the shared semantic color, typography and spacing tokens listed in Design tokens, so it follows theme changes made there.