PlumUI

Toast

Notifications that stack, spread out on hover and swipe away. One function call from anywhere — no context, no hooks.

Feedback

Playground

Tweak the props, the preview and the code follow.

    Props
    // once, at the root of your app
<Toaster />

// anywhere
toast.success("Deployment ready", {
  description: "acme-web is live on production.",
})

    Installation

    npx @plumsydev/plum-ui add toast

    Usage

    import { toast, Toaster } from "@/components/ui/toast"
    // once, in your root layout
<Toaster position="bottom-right" />

// anywhere
toast.success("Saved", { description: "Your changes are live." })

    Examples

    Types

    Promise

    One toast follows the promise from loading to success or error, morphing its icon in place.

    Stacking

    Toasts pile up compactly and fan out while hovered. Timers pause meanwhile.

    Click a few times, then hover the stack. Swipe to dismiss.

    Undo

    Archive a message and bring it back from the toast. Custom icon via icon.

    • Vercel
      Your deployment is ready
    • Linear
      3 issues assigned to you
    • GitHub
      [plumlib] PR #48 approved

    API Reference

    Toaster

    Renders the stack. Mount it once.

    PropTypeDefault
    position

    Corner the stack lives in.

    		"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right""bottom-right"
    visibleToasts

    Max toasts visible at once. Extra ones wait behind.

    		number3
    duration

    Default time before auto-dismiss, in ms.

    		number4000
    closeButton

    Show a close button on hover.

    		booleanfalse
    richColors

    Tints success, error, info and warning toasts.

    		booleanfalse
    expand

    Always show the stack spread out instead of on hover.

    		booleanfalse
    id

    Only shows toasts sent with the matching `toasterId`. Lets you mount several toasters.

    		string—

    toast(title, options?)

    Also toast.success, .error, .info, .warning, .loading. Returns the toast id.

    PropTypeDefault
    description

    Secondary line under the title.

    		ReactNode—
    action

    Inline action button. Clicking it also dismisses.

    		{ label: string; onClick: () => void }—
    duration

    Overrides the Toaster duration. `Infinity` keeps it open.

    		number—
    id

    Pass an existing id to update that toast in place.

    		string | number—
    dismissible

    Allow swipe to dismiss.

    		booleantrue
    onDismiss

    Called when the toast is dismissed.

    		() => void—
    cancel

    Secondary, quieter button next to the action.

    		{ label: string; onClick?: () => void }—
    icon

    Replaces the icon of the toast type.

    		ReactNode—
    closeButton

    Overrides the Toaster setting for this toast.

    		boolean—
    toasterId

    Sends the toast to a specific `<Toaster id>`.

    		string—

    toast.promise(promise, messages)

    Accepts a promise or a function returning one. Resolves with the original promise.

    PropTypeDefault
    loading*

    Shown while pending.

    		ReactNode—
    success*

    Shown on resolve.

    		ReactNode | (data) => ReactNode—
    error*

    Shown on reject.

    		ReactNode | (error) => ReactNode—

    toast.dismiss(id?)

    Dismiss one toast, or all of them when called without an id.

    Notes

    • The store lives outside React, so toast() works from event handlers, server action callbacks and plain modules.
    • The stack is announced to screen readers through a polite live region.
    PreviousTimelineNextToggle