Chip

Interactive compact element for filters, selections, and removable attributes.

stable
since v0.1.0
2.5 kB
feedback
filter
selection

Preview

tsx

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

export default function Example() {
  return <Chip>Status</Chip>;
}

Variants

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

Preview

Open

tsx

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

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

Sizes

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

Preview

Open

tsx

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

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

Selected state

Chips support a controlled selected boolean with onSelectedChange for toggle-style filters. Selection state is mirrored to aria-pressed.

Preview

Open

tsx

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

export default function Example() {
  const [filters, setFilters] = useState<Record<string, boolean>>({
    design: true,
    engineering: false,
    research: false,
  });

  const toggle = (key: string) => (next: boolean) =>
    setFilters((prev) => ({ ...prev, [key]: next }));

  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Chip colorScheme="accent" selected={filters.design} onSelectedChange={toggle('design')}>
        Design
      </Chip>
      <Chip
        colorScheme="accent"
        selected={filters.engineering}
        onSelectedChange={toggle('engineering')}
      >
        Engineering
      </Chip>
      <Chip colorScheme="accent" selected={filters.research} onSelectedChange={toggle('research')}>
        Research
      </Chip>
    </div>
  );
}

Removable

Pass onRemove to render a dismiss control next to the chip label. The chip splits into two focusable buttons — the label and the remove control — so each is independently keyboard reachable.

Preview

Open

tsx

import { Chip } 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) => (
        <Chip
          key={tag}
          colorScheme="neutral"
          onRemove={() => setTags((prev) => prev.filter((t) => t !== tag))}
        >
          {tag}
        </Chip>
      ))}
    </div>
  );
}

With icon

Use leftIcon or rightIcon to decorate the chip with a leading or trailing glyph.

Preview

Open

tsx

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

const CheckIcon = () => (
  <svg
    width="14"
    height="14"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2.25"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <polyline points="20 6 9 17 4 12" />
  </svg>
);

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Chip leftIcon={<CheckIcon />} colorScheme="success" selected>
        Verified
      </Chip>
      <Chip leftIcon={<CheckIcon />} colorScheme="accent">
        Beta
      </Chip>
    </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.

selected

boolean

false

Toggled / pressed state. Reflected on the button as `aria-pressed`.

onSelectedChange

((selected: boolean) => void)

—

Invoked with the next selected value when the chip is activated.

leftIcon

ReactNode

—

Icon rendered before the label.

rightIcon

ReactNode

—

Icon rendered after the label.

onRemove

(() => void)

—

Invoked when the trailing remove button is activated.

removeLabel

string

—

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

children

ReactNode

—

Chip label content.

Accessibility

The chip body is a native <button type="button"> with aria-pressed toggled by selected.
When onRemove is set, the dismiss control becomes a separate <button> with an accessible aria-label derived from the chip label (or removeLabel if supplied).
disabled propagates to both the label and remove buttons, and the wrapper sets aria-disabled for assistive tech.
Keep chip text short — single tokens or two-word phrases read best for screen reader users navigating filter lists.

Recipes

Use chips as toggleable filters in faceted search.
Combine with an input to build a token-style multi-select.
Use shape="square" for compact metadata chips and shape="pill" (default) for filters.
Provide a removeLabel for non-string children so the dismiss action stays announced.