Toast

Render Toaster once, near the root of the app, inside BooleanUIProvider. Anywhere else, call toast from the sonner package. The package does not wrap toast, so Sonner's own documentation applies to it.

import { toast } from "sonner"
import { Button } from "@booleanpress/ui/button"
import { Toaster } from "@booleanpress/ui/sonner"

export function App() {
  return (
    <>
      <Button onClick={() => toast.success("Settings saved")}>Save</Button>
      <Toaster />
    </>
  )
}

Toaster sets, for every product: coloured status toasts, a close button, 4 seconds on screen, at most 3 visible at once, a 12 px radius and a width of min(24rem, 100vw − 2rem). It also takes the direction, the region's name and the close button's name from the provider (notifications and closeNotification).

The app passes its theme: theme is "light", "dark" or "system" (the default). It does not read a theme provider of its own. position, offset and mobileOffset are Sonner's: BooleanSMTP sets them to clear the WordPress admin bar.

toast(message, options) returns an id. The options used most are description, action ({ label, onClick }), duration and id; toast.success, toast.error, toast.warning, toast.info set the type, toast.promise follows a promise, and toast.dismiss(id) closes one. Pass toasterId and give Toaster the same id only when a page has more than one Toaster, as the examples on this site do.

Each status type draws its fill and border from the status token (--success, --info, --warning, --destructive) mixed into --popover, and keeps the text in --popover-foreground. The plain toast uses --popover, --popover-foreground and --border; the action button uses --primary. Override any of Sonner's CSS variables with style, and the part classes with toastOptions.classNames: yours are merged over the package's.