Badge

A miniature key for status and counts. Filled variants are embossed chips resting on the surface; muted is debossed — carved in for quiet, passive status.

BadgeSecondaryDestructiveOutlineMutedVerified

tsx

import { BadgeCheck } from "lucide-react"

import { Badge } from "@/registry/seam/ui/badge"

export default function BadgeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>Badge</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="muted">Muted</Badge>
      <Badge variant="secondary">
        <BadgeCheck />
        Verified
      </Badge>
    </div>
  )
}

bunx --bun @seamui/cli@latest add badge

Notes

Not pressable, so it carries no press feedback — for a tappable chip, use a small Button or Toggle instead.
Renders a <span>; when a badge conveys meaning through color alone, include the meaning in the text (e.g. “Error”) rather than relying on the variant.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.