Badge

Displays a badge or label component for categorizing and highlighting information.

1. Import

Import the badge component from the design system.

import { Badge } from "@/design-system/components/ui/badge"

2. Props

Badge component props.

Prop	Type	Default
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"	"default"
className	string	--

3. Usages

Common badge patterns and configurations.

DefaultSecondaryDestructiveOutline

import { Badge } from "@/design-system/components/ui/badge";

export function Example() {
  return (
    <div className="flex gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}