Tag Cluster

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

designshippedneeds reviewarchived

New here? Read the installation guide.

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}
/>

More Tag pieces

View all Tag
v2.4.1NEW

Version Badge

Split chip with a monospace version string and a colored stage tag like NEW or BETA.

BESTE20
20% OFF

Coupon Code

Dashed-border tag with a monospace code on the left and a colored discount callout on the right.

Beste@withbeste

Verified Handle

Display name followed by a filled badge-check icon and an optional handle. Tone colors the check.