Tag

Short label that classifies or attributes content with a category or keyword. Optionally clickable or removable.

stable
since v0.1.0
1.5 kB
feedback
label
metadata

Preview

tsx

import { Tag } from '@arshad-shah/cynosure-react';

export default function Example() {
  return <Tag>Design</Tag>;
}

Variants

Tag ships four variants — solid, soft (default), outline, and ghost — across six colour schemes (accent, neutral, success, warning, danger, info).

Preview

Open

tsx

import { Tag } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Tag variant="solid" colorScheme="accent">
        Accent
      </Tag>
      <Tag variant="soft" colorScheme="success">
        Success
      </Tag>
      <Tag variant="outline" colorScheme="warning">
        Warning
      </Tag>
      <Tag variant="ghost" colorScheme="danger">
        Danger
      </Tag>
      <Tag variant="soft" colorScheme="info">
        Info
      </Tag>
      <Tag variant="soft" colorScheme="neutral">
        Neutral
      </Tag>
    </div>
  );
}

Sizes

Three sizes are available: xs, sm, and md (default).

Preview

Open

tsx

import { Tag } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Tag size="xs">Extra small</Tag>
      <Tag size="sm">Small</Tag>
      <Tag size="md">Medium</Tag>
    </div>
  );
}

With icon

Pass any node to icon for a leading glyph. The icon is wrapped in an aria-hidden span so it stays decorative.

Preview

Open

tsx

import { Tag } from '@arshad-shah/cynosure-react';

const HashIcon = () => (
  <svg
    width="12"
    height="12"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <line x1="4" y1="9" x2="20" y2="9" />
    <line x1="4" y1="15" x2="20" y2="15" />
    <line x1="10" y1="3" x2="8" y2="21" />
    <line x1="16" y1="3" x2="14" y2="21" />
  </svg>
);

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Tag icon={<HashIcon />} colorScheme="accent">
        design-system
      </Tag>
      <Tag icon={<HashIcon />} colorScheme="success">
        released
      </Tag>
      <Tag icon={<HashIcon />} colorScheme="warning">
        in-review
      </Tag>
    </div>
  );
}

Clickable

Provide onClick to make the entire tag a button. Use this for filter chips that should respond to a single activation.

Preview

Open

tsx

import { Tag } from '@arshad-shah/cynosure-react';
import { useState } from 'react';

export default function Example() {
  const [active, setActive] = useState('design');
  const filters = ['design', 'engineering', 'research'];
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      {filters.map((filter) => (
        <Tag
          key={filter}
          colorScheme={active === filter ? 'accent' : 'neutral'}
          variant={active === filter ? 'solid' : 'soft'}
          onClick={() => setActive(filter)}
        >
          {filter}
        </Tag>
      ))}
    </div>
  );
}

Removable

Pass onRemove to render a dismiss control. The root becomes role="group", the remove button is keyboard reachable, and pressing Backspace or Delete on the focused group calls onRemove.

Preview

Open

tsx

import { Tag } from '@arshad-shah/cynosure-react';
import { useState } from 'react';

export default function Example() {
  const [tags, setTags] = useState(['design', 'engineering', 'research']);
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      {tags.map((tag) => (
        <Tag
          key={tag}
          colorScheme="accent"
          onRemove={() => setTags((prev) => prev.filter((t) => t !== tag))}
        >
          {tag}
        </Tag>
      ))}
    </div>
  );
}

API

PropTypeDefaultDescription

variant

"solid"|"soft"|"outline"|"ghost"

soft

Visual style. One of `soft`, `solid`, `outline`, `ghost`.

colorScheme

neutral

Semantic palette. One of `neutral`, `accent`, `success`, `warning`, `danger`, `info`.

size

"xs"|"sm"|"md"

Pixel scale. One of `xs`, `sm`, `md`.

shape

"default"|"pill"|"square"

pill

Outline shape. `default` is gently rounded; `pill` is fully rounded; `square` has no corner rounding.

icon

ReactNode

—

Leading icon rendered before the children.

onRemove

(() => void)

—

Invoked when the user activates the trailing remove button.

onClick

(() => void)

—

Invoked when the tag itself is activated (click or keyboard).

removeLabel

string

—

Accessible label for the remove button. Defaults to `Remove {children}` when `children` is a string, otherwise `Remove`.

disabled

boolean

—

Disables the tag and its remove button, removing it from tab order.

children

ReactNode

—

Tag label content.

Accessibility

Static tags render as <span> — purely presentational.
Tags with onClick upgrade to <button> and inherit native button semantics.
Tags with onRemove render as role="group" with the focusable remove button labelled by removeLabel (defaults to Remove {label} when children is a string, otherwise Remove).
The group is tabIndex={0} so keyboard users can press Backspace or Delete to remove it without targeting the close button.
disabled propagates to the remove and click buttons and removes the group from tab order.

Recipes

Use tags to classify articles, issues, or library entries with consistent colour.
Pair onClick with controlled filters to build a quick-filter row.
Provide removeLabel for non-string children so the remove action remains announced.
Use shape="square" for compact metadata strips and the default pill shape for prose contexts.