Sonner

Toast notifications for transient feedback — “Label purchased”, “Shipment cancelled”, and the like. Built on sonner, pre-styled with rich colors, lucide icons, and our theme tokens.

Two pieces: <Toaster />, the host that renders the stack, and toast(), the function you call to push a notification. The app mounts one <Toaster /> at the root (in WMS it lives in __root.tsx), then any component calls toast() — no context, no provider wiring at the call site.

Each demo below mounts its own <Toaster /> so the toast has somewhere to render. In a real app you do this once at the root, not per component.

Basic

Call toast() with a message string. It appears bottom-right, auto-dismisses, and stacks with any others.

import { Button, Toaster, toast } from "@vesyl/ui-next";

export default function SonnerBasic() {
  return (
    <>
      <Button variant="outline" onClick={() => toast("Label purchased")}>
        Show toast
      </Button>
      <Toaster />
    </>
  );
}

Variants

toast.success, toast.error, toast.warning, and toast.info add a colored icon and accent. Reach for these to signal outcome — a purchased label is a success, a failed charge is an error. (toast.error is sticky in our wrapper: it stays until dismissed and shows a close button.)

import { Button, ButtonGroup, Toaster, toast } from "@vesyl/ui-next";

export default function SonnerVariants() {
  return (
    <>
      <ButtonGroup>
        <Button
          variant="outline"
          onClick={() => toast.success("Label purchased")}
        >
          Success
        </Button>
        <Button
          variant="outline"
          onClick={() => toast.error("Purchase failed")}
        >
          Error
        </Button>
        <Button
          variant="outline"
          onClick={() => toast.warning("Address could not be verified")}
        >
          Warning
        </Button>
        <Button
          variant="outline"
          onClick={() => toast.info("Rates refreshed")}
        >
          Info
        </Button>
      </ButtonGroup>
      <Toaster />
    </>
  );
}

Description and action

The second argument is an options object. description renders a secondary line; action adds a button — { label, onClick } — for a follow-up like copying a tracking number.

import { Button, Toaster, toast } from "@vesyl/ui-next";

export default function SonnerDescriptionAction() {
  return (
    <>
      <Button
        variant="outline"
        onClick={() =>
          toast.success("Label purchased", {
            description: "Tracking number 1Z999AA10123456784",
            action: {
              label: "Copy",
              onClick: () =>
                navigator.clipboard.writeText("1Z999AA10123456784"),
            },
          })
        }
      >
        Show toast
      </Button>
      <Toaster />
    </>
  );
}

Promise / loading

toast.promise ties a single toast to an async task: it shows the loading message while the promise is pending, then swaps to success or error when it settles. Use it for purchases, cancellations, and other awaitable mutations. For a standalone spinner toast you can drive yourself, call toast.loading(...) and later toast.dismiss(id).

import { Button, Toaster, toast } from "@vesyl/ui-next";

function cancelShipment() {
  return new Promise<void>((resolve) => setTimeout(resolve, 2000));
}

export default function SonnerPromise() {
  return (
    <>
      <Button
        variant="outline"
        onClick={() =>
          toast.promise(cancelShipment(), {
            loading: "Cancelling shipment…",
            success: "Shipment cancelled",
            error: "Could not cancel shipment",
          })
        }
      >
        Cancel shipment
      </Button>
      <Toaster />
    </>
  );
}

Reference

Toaster

The host component. Mount once near the app root. Extends sonner Toaster props — ours pre-sets richColors, themed style tokens, lucide icons, and a dismiss button, but every prop below can still be overridden.

Prop	Type	Default	Description
`theme`	`"light" \| "dark" \| "system"`	from `next-themes`	Color scheme; defaults to the active app theme
`position`	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`	`"bottom-right"`	Where the stack renders
`richColors`	`boolean`	`true`	Tints success / error / warning / info toasts
`closeButton`	`boolean`	`false`	Show a close button on every toast
`expand`	`boolean`	`false`	Expand the stack on hover instead of stacking
`duration`	`number`	`4000`	Default auto-dismiss time in ms for all toasts
`toastOptions`	`ExternalToast`	—	Default options merged into every toast

toast()

The trigger function, re-exported from sonner with our overrides. Call toast(message, options?), or one of the variant methods. Returns the toast id.

Method	Signature	Description
`toast`	`(message, options?) => id`	Default neutral toast
`toast.success`	`(message, options?) => id`	Success variant (green, check icon)
`toast.error`	`(message, options?) => id`	Error variant — sticky in our wrapper (no auto-dismiss, close button)
`toast.warning`	`(message, options?) => id`	Warning variant (amber, triangle icon)
`toast.info`	`(message, options?) => id`	Info variant (blue, info icon)
`toast.loading`	`(message, options?) => id`	Spinner toast; dismiss it yourself with the returned id
`toast.promise`	`(promise, { loading, success, error }) => id`	Binds one toast to an async task’s lifecycle
`toast.message`	`(message, options?) => id`	Explicit neutral toast (alias of the default call)
`toast.dismiss`	`(id?) => void`	Dismiss a specific toast, or all when called with no id

Options (second argument)

The options object (ExternalToast) shared by all toast methods. Common fields:

Option	Type	Description
`description`	`ReactNode`	Secondary line under the message
`action`	`{ label, onClick }`	A button rendered in the toast for a follow-up action
`duration`	`number`	Auto-dismiss time in ms (`Infinity` to keep it open)
`closeButton`	`boolean`	Show a close button on this toast
`id`	`string \| number`	Reuse an id to update an existing toast in place
`onDismiss`	`(toast) => void`	Fires when the toast is dismissed
`onAutoClose`	`(toast) => void`	Fires when the toast auto-closes after its duration