Segmented sonner

Filter notices by segment and let people dismiss or act on each notice.

Preview

Changes savedYour preferences are up to date.

Review neededOne item needs your attention.

Installation

Copy the source files below into your project and preserve their relative imports. Load the shared tokens and the listed styles. Then install the dependencies. A standalone local registry endpoint is not available for this component.

Install

npm install lucide-react

Source files

src/components/ui/segmented-sonner.tsx

Basic usage

123import { SegmentedSonner } from "@/components/ui/segmented-sonner";

<SegmentedSonner tabs={[{ value: "all", label: "All" }]} notices={[{ id: "saved", title: "Saved", description: "Changes saved.", tone: "success" }]} />

Use the exported component in the composition shown above. Keep labels, data, and callbacks in the consuming application.

Structure

Examples

The Preview above is the canonical segmented-sonner example. Compose it with the public parts shown in Structure.

API reference

segmented-sonner properties
Prop	Type	Description
`tabs`required	`{ value: string; label: string; count?: number; }[]`	Sets tabs.
`notices`required	`SonnerCard[]`	Sets notices.
`defaultTab`	`string \| undefined`	Sets default tab.
`onDismiss`	`((notice: SonnerCard) => void) \| undefined`	Sets on dismiss.