codefast/ui

Command Palette

Search for a command to run...

Source
Feedback

Sonner

Toast notifications via Sonner. Supports success, error, warning, and custom durations.

Examples

Toast types

Click to fire a real toast — default, success, info, warning, error, and promise.

39 lines
import { Button } from "@codefast/ui/button";
import { toast } from "@codefast/ui/sonner";

export function SonnerTypes() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="outline" onClick={() => toast("Event has been created")}>
        Default
      </Button>
      <Button variant="outline" onClick={() => toast.success("Event has been created")}>
        Success
      </Button>
      <Button variant="outline" onClick={() => toast.info("Be at the area 10 minutes before the event time")}>
        Info
      </Button>
      <Button variant="outline" onClick={() => toast.warning("Event start time cannot be earlier than 8am")}>
        Warning
      </Button>
      <Button variant="outline" onClick={() => toast.error("Event has not been created")}>
        Error
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          toast.promise<{ name: string }>(
            () => new Promise((resolve) => setTimeout(() => resolve({ name: "Event" }), 2000)),
            {
              loading: "Loading...",
              success: (data) => `${data.name} has been created`,
              error: "Error",
            },
          );
        }}
      >
        Promise
      </Button>
    </div>
  );
}

Description

Add a secondary line under the title with the description option.

18 lines
import { Button } from "@codefast/ui/button";
import { toast } from "@codefast/ui/sonner";

export function SonnerDescription() {
  return (
    <Button
      variant="outline"
      className="w-fit"
      onClick={() =>
        toast("Event has been created", {
          description: "Monday, January 3rd at 6:00pm",
        })
      }
    >
      Show Toast
    </Button>
  );
}

Position

Use the position prop to change the position of the toast.

27 lines
import { Button } from "@codefast/ui/button";
import { toast } from "@codefast/ui/sonner";

export function SonnerPosition() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <Button variant="outline" onClick={() => toast("Event has been created", { position: "top-left" })}>
        Top Left
      </Button>
      <Button variant="outline" onClick={() => toast("Event has been created", { position: "top-center" })}>
        Top Center
      </Button>
      <Button variant="outline" onClick={() => toast("Event has been created", { position: "top-right" })}>
        Top Right
      </Button>
      <Button variant="outline" onClick={() => toast("Event has been created", { position: "bottom-left" })}>
        Bottom Left
      </Button>
      <Button variant="outline" onClick={() => toast("Event has been created", { position: "bottom-center" })}>
        Bottom Center
      </Button>
      <Button variant="outline" onClick={() => toast("Event has been created", { position: "bottom-right" })}>
        Bottom Right
      </Button>
    </div>
  );
}

Usage

The minimal import and composition — see Examples below for styled, real-world variants.

10 lines
import { Button } from "@codefast/ui/button";
import { toast } from "@codefast/ui/sonner";

export function SonnerUsage() {
  return (
    <Button variant="outline" onClick={() => toast("Event has been created.")}>
      Show Toast
    </Button>
  );
}

Anatomy

How the parts nest — every slot the component exposes, in composition order.

Toaster

Features

  • Custom icons per severity (success/error/warning/info/loading) match the rest of the design system instead of Sonner's defaults.
  • Automatically follows the app's next-themes theme (light/dark/system) — no manual theme prop needed.
  • toast.promise(promise, { loading, success, error }) chains all three states from a single call, auto-updating as the promise settles.

API reference

Props for each part of the component. All native element props are also forwarded.

toast()

Imperative API. Call a method to enqueue a toast.

toast(message, options?)(message, ToastOptions) => id

Base toast. .success / .error / .warning / .info set the variant.

toast.promise(p, msgs)(Promise, { loading, success, error }) => void

Shows loading, then resolves to success or error automatically.

options.action{ label: string; onClick: () => void }

Renders a button inside the toast (e.g. Undo).

options.descriptionReactNode

Secondary line under the title.

Toaster

Mount once. Renders the toast region.

position"top-right" | "bottom-right" | …

Corner the toasts stack in.

Default"bottom-right"

richColorsboolean

Use saturated success/error backgrounds.

Defaultfalse

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

  • Toasts render in an aria-live region so screen readers announce them.
  • Keep messages short; put any required action behind an explicit action button.
  • Don’t use toasts for critical errors that need a decision — use an Alert Dialog.

Guidelines

Conventions that keep usage consistent across an app.

Do

  • Confirm background actions (saved, copied, deleted) with a brief toast.
  • Offer Undo for destructive actions instead of a blocking confirm.

Don’t

  • Don’t stack many toasts at once or use long durations.
  • Don’t put essential, long-lived information in a toast.

Explore further

Ready to integrate?

Follow the Getting Started guide to install @codefast/ui, or browse the full component gallery.

Getting StartedBrowse all components