Tag Cluster

Wrapping row of tinted tags in five tones, each optionally removable.

designshippedneeds reviewarchived

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Badge1 } from "@/components/beste/piece/badge1";

<Badge1
  tags={[
    {
      "label": "design",
      "tone": "primary"
    },
    {
      "label": "shipped",
      "tone": "success"
    },
    {
      "label": "needs review",
      "tone": "warning"
    },
    {
      "label": "archived",
      "tone": "muted"
    }
  ]}
  removable={true}
  tone={undefined}
/>