Sonner

since 1.0

A toast notification system for displaying temporary messages to users.

Example

"use client"

import { Button } from "@strongtie/design-system/button"
import { toast } from "sonner"

/**
 * Mount `<Toaster />` from "@strongtie/design-system/sonner" once at the root of
 * the app (this docs site does it in `app/layout.tsx`), then call `toast()` from
 * anywhere beneath it.
 */
export function SonnerDefault() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        variant="outline"
        onClick={() =>
          toast("Anchor schedule saved", {
            description: "Revision 4 — Tuesday, March 11 at 2:14 PM",
          })
        }
      >
        Show toast
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.success("Submittal package exported")}
      >
        Success
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.error("Upload failed", {
            description: "The connection dropped before the file finished.",
            action: { label: "Retry", onClick: () => toast("Retrying…") },
          })
        }
      >
        Error with action
      </Button>
    </div>
  )
}

Install

import { Sonner } from "@strongtie/design-system/sonner"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

All components accept standard HTML attributes and React props.

When not to use it

Don't use toasts for critical information the user must act on or must not miss — they auto-dismiss and stack, so anything blocking belongs in a dialog and anything persistent belongs in an inline alert. Avoid firing multiple toasts for a single action.

Slider Spinner

On This Page

Example Install Props When not to use it

Contribute