Badge

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

$ npx @beaket/ui add badge

DefaultSecondary Success Error InfoOutline WarningSPEC-001

Source

import { CircleCheck, CircleX, Info, TriangleAlert } from "lucide-react";

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

export default () => (
  <div className="flex flex-wrap gap-2">
    <Badge variant="default">Default</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="success">
      <CircleCheck aria-hidden="true" className="mr-1 size-3" /> Success
    </Badge>
    <Badge variant="error">
      <CircleX aria-hidden="true" className="mr-1 size-3" /> Error
    </Badge>
    <Badge variant="info">
      <Info aria-hidden="true" className="mr-1 size-3" /> Info
    </Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="warning">
      <TriangleAlert aria-hidden="true" className="mr-1 size-3" /> Warning
    </Badge>
    <Badge variant="code">SPEC-001</Badge>
  </div>
);

Props

Name	Type	Default	Description
variant	undefined \| default \| secondary \| success \| danger \| error \| info \| outline \| warning \| code	default	Badge style. Prefer danger for the semantic role; error remains an alias.
children*	React.ReactNode	—	Visible label or content. A badge must not communicate its state through color alone.