components / badge

badge.

small chip. static label by default; pass onClick to make it a toggle/filter chip, with active swapping to the solid look.

outlinesolidghost

installation

bunx @justin06lee/chrome@latest add badge

usage

Variants

outlinesolidghost

<Badge>outline</Badge>
<Badge variant="solid">solid</Badge>
<Badge variant="ghost">ghost</Badge>

Filter chips

const [on, setOn] = useState(["react"]);

<Badge
  variant="ghost"
  active={on.includes(t)}
  onClick={() => toggle(t)}
>
  {t}
</Badge>