Display

Tag

A small label people act on: filter by it, remove it, or read a token's color.

import { Tag } from "@flinbu/seed";

Variants, filters and removable token chips

DraftFrom Figmav2.4PublishedDriftBroken alias

brand-500neutral-900success-600

import { Inline, Stack, Tag } from "@flinbu/seed";
import { Check, PenTool } from "lucide-react";

const [on, setOn] = React.useState(["Color"]);
const [tags, setTags] = React.useState([["brand-500", "#2563EB"], ["neutral-900", "#171717"], ["success-600", "#16A34A"]]);

<Stack gap="sm">
  <Inline><Tag>Draft</Tag><Tag icon={<PenTool />}>From Figma</Tag><Tag variant="accent">v2.4</Tag><Tag variant="success" icon={<Check />}>Published</Tag><Tag variant="warning">Drift</Tag><Tag variant="error">Broken alias</Tag></Inline>
  <Inline role="group" aria-label="Filter by type">
    {["Color", "Spacing", "Typography"].map((t) => <Tag key={t} selected={on.includes(t)} onClick={() => setOn(on.includes(t) ? on.filter((x) => x !== t) : [...on, t])}>{t}</Tag>)}
  </Inline>
  <Inline>{tags.map(([n, c]) => <Tag key={n} size="sm" swatch={c} onRemove={() => setTags(tags.filter((x) => x[0] !== n))}>{n}</Tag>)}</Inline>
</Stack>

Use it for

Filters, chosen values, token chips.

Use something else for

Status nobody clicks: use Badge.

Props

Prop	Type	Default	Description
`variant`	`'neutral''accent''success''warning''error'`	`'neutral'`	Meaning.
`size`	`'sm''md'`	`'md'`	24 or 32px.
`swatch`	`string`	–	A CSS color chip.
`icon`	`IconProp`	–	Leading icon. An element like <Search /> (works in server components) or, in client components, the component itself.
`onClick / selected`	`function / boolean`	–	A toggle.
`onRemove`	`function`	–	Adds a remove button.

Accessibility

onClick makes it a toggle button with aria-pressed; the remove button is named Remove {text}.