Badge

Compact labels for statuses, counts, and tags.

DefaultSecondaryOutlineCompletedPendingCoralApp shellEvent Design99+
Installation
$Terminal
npx shadcn@latest add https://sdk-components.thesqd.com/r/badge.json
Usage
Import from the master file and compose. `type` + `color` drive the visual treatment; `size` and `shape` are orthogonal.
TSExample
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge>New</Badge>
      <Badge type="status" color="success">Completed</Badge>
      <Badge type="outline" onRemove={() => {}}>Removable</Badge>
    </div>
  );
}
Composition
Anatomy of the Badge primitive.
Badge
├── (optional) leading swatch — driven by `swatchClassName`
├── (optional) leading status dot — automatic when `type="status"`
├── children — your label / count / icon
└── (optional) trailing × button — when `onRemove` is set
Types
`type` controls the visual treatment: `pill-color` (default soft tint), `outline`, `ghost`, `secondary`, `link`, `tag` (neutral muted fill — color-free chip). The default `<Badge>` resolves to `type="pill-color" color="brand"`.
DefaultSecondaryOutlineGhostTagLinkDestructive
Fancy
`type="fancy"` is the glossy pill — a soft radial color wash over a white surface with a white inset highlight and drop shadow. Pick a tone with the `color` prop (`brand` | `coral` | `destructive` | `warning` | `success`, defaulting to `brand`); pass `className` only to override beyond those presets.
BrandCoralDisabledPendingAvailable
Sizes
Badge heights mirror Squad buttons: xxs = h-4 (micro pill), xs = h-5 (extra compact), sm = button xs, default = button sm, lg = button default.
TinyExtra smallSmallDefaultLarge
Status
`type="status"` adds a leading colored dot. Pair with `color="success | warning | destructive | info | muted | brand"` (or any brand color) to drive the pill + dot in one call.
CompletedPendingFailedIn reviewDraftActive
Categories
Non-semantic category chips. Same `type="pill-color"` recipe; `color` picks the palette: `brand | emerald | amber | sky | muted | fuchsia`. The global search uses this set to label what group a result comes from.
Get startedComponentsBlocksApp shellVariantsReference
Brand colors
Use `type="pill-color"` + `color="brand|indigo|coral|purple|amber|magenta|lavender|lilac|pink|cream|blush|peach"`. Same recipe as the default soft-tinted pill — the `color` prop swaps the palette.
VioletIndigoCoralPurpleAmberMagentaLavenderLilacPinkCreamBlushPeach
Solid brand colors
Use `type="solid"` + the same `color` tokens as `pill-color` for a saturated bg with on-color text. Pastel hexes pair with the darkest-purple Squad text (`#341756`) for legibility; saturated brand colors get white. Ideal for overlay tags on image cards and high-contrast promo chips.
VioletIndigoCoralPurpleAmberMagentaLavenderLilacPinkCreamBlushPeach
Removable (tag chip)
`onRemove` adds a trailing × button; `swatchClassName` adds a leading swatch dot. Combine with any `type` — outline reads best for tag chips.
Sermon DesignEvent DesignEaster DesignNo swatch
Tag
`type="tag"` — squared, subtle gray keyword chips (rounded-md, no border, no ×). The static, read-only counterpart to tag-input chips. Pair with `size="sm"` for the compact input scale.
SportsCodingReactUI
DesignEngineeringProduct
With content
Counts, truncation, icons. Mix any `type` with arbitrary children — the same `type` + `color` API drives the surface.
New99+Really long badge label that gets truncated
API Reference
Props exposed by the Badge primitive.

Badge

PropTypeDefaultDescription
type"pill-color" | "solid" | "fancy" | "outline" | "ghost" | "secondary" | "link" | "status" | "tag""pill-color"Visual treatment. `status` adds a leading colored dot using `color`; `solid` is a saturated fill; `fancy` is the glossy radial-wash pill.
color"brand" | "indigo" | "coral" | "purple" | "amber" | "magenta" | "lavender" | "lilac" | "pink" | "cream" | "blush" | "peach" | "destructive" | "success" | "warning" | "info" | "muted" | "emerald" | "sky" | "fuchsia""brand"Palette token. Drives bg/border/text when type=`pill-color`, `solid`, `status`, or `fancy`.
size"xxs" | "xs" | "sm" | "default" | "lg""default"Heights mirror Button: xxs = h-4 (micro pill), xs = h-5, sm = h-6, default = h-8, lg = h-10.
shape"pill" | "rounded""pill"`pill` = rounded-full; `rounded` = rounded-md.
swatchClassNamestring—Tailwind bg-* class for an optional leading 2.5×2.5 swatch dot.
onRemove() => void—When set, renders a trailing × button. Pair with controlled state in the parent.
classNamestring—Override or extend the resolved type/color classes.
variantstring—Deprecated — kept for back-compat. Mapped through to (type, color).