StorybookGitHub

Badge

Displays a badge or a component that looks like a badge.

Badge

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/badge.json

Usage

Use badges for status, counts, labels, and compact metadata.

import { Badge } from "@/components/badge/badge";

export function Example() {
  return <Badge>Badge</Badge>;
}

Variants: default, secondary, destructive, outline, ghost, and link. Render as a link with render={<a href="..." />}.