Badge

A compact label for status indicators, categories, and counts.

Install

npx @beaket/ui add badge

Import

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

Examples

Variants

export const AllVariants = () => (
  <div className="flex flex-wrap gap-2">
    <Badge variant="default">Default</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="error">Error</Badge>
    <Badge variant="info">Info</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="code">SPEC-001</Badge>
  </div>
);

Props

Name	Type	Default	Description
variant	undefined \| default \| secondary \| success \| error \| info \| outline \| warning \| code	—	default \| secondary \| success \| error \| info \| outline \| warning \| code. Badge style variant