Notification

Pill-shaped inline notification for transient status messages.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/notification.json

Usage

Render an icon, body, and optional action inside a Notification. Pair with sonner toasts for transient pop-ups.

TSImport

import { Notification } from "@/components/ui/notification";

TSExample

import { CheckCircle2Icon } from "lucide-react";
import { Notification } from "@/components/ui/notification";

export function Example() {
  return (
    <Notification
      variant="success"
      icon={<CheckCircle2Icon />}
      title="File uploaded successfully"
      description="You can preview it now."
    />
  );
}

Composition

Anatomy of the Notification primitive.

Notification                      (single component — pass content as props)
├── variant="default | brand | info | success | warning | destructive"
├── icon={<LucideIcon />}          (leading icon, optional)
├── title={<ReactNode>}
├── description={<ReactNode>}      (optional second line)
└── action={<Button … />}          (right-aligned slot, optional)

Slot exports — NotificationBody, NotificationTitle, NotificationDescription,
NotificationAction — remain as the escape hatch for unusual layouts.

Live toast

Push a Sonner toast at the bottom of the viewport. The Toaster ships pre-styled to match the inline pill — rounded-full, white card, dark check icon — and stacks new toasts vertically.

Default

Neutral tone — mirrors the sonner toast we show on copy.

Brand

Uses the primary accent for product-tone confirmations.

Info

Neutral, informational context.

Success

Confirms a completed action.

Warning

Highlights a recoverable problem or caution.

Destructive

Communicates an error or failed operation.

With description

Two-line layout — title plus a secondary line for detail or context.

Report issue (destructive)

Self-contained `ReportIssueNotification` — destructive notification with a built-in report button. Click it: the button swaps to a Squad spinner while the request runs, then an info toast confirms support has been notified.

Custom action handler

Wire `notification(...)`'s `actionButton.onAction` to a real async handler. Resolve → toast dismisses and the optional `successMessage` fires as an info toast. Throw/reject → toast stays open and the button resets to idle for retry.

API Reference

Props exposed by the Notification component.

Prop	Type	Default	Description
`variant`	"default" \| "brand" \| "info" \| "success" \| "warning" \| "destructive"	"default"	Tone — drives border tint and the leading icon color.
`icon`	ReactNode	—	Leading icon — typically a lucide icon component.
`title`	ReactNode	—	Heading text rendered inside the auto-emitted body.
`description`	ReactNode	—	Optional second line beneath the title.
`action`	ReactNode	—	Right-aligned content (button, link, etc).
`className`	string	—	Override or extend the resolved variant classes.