Chip

Chip is the action sibling of Badge and Tag. Always interactive. Render a Chip only when onChipClick, onRemove, or showDropdown is wired up — a Chip with no handler is a bug.

<Chip label="Active" onRemove={...} />

<FilterButton label="Status" options={...} />

<Button>Save</Button>

Use it for

• Active filter pills with a dismiss X ("Status: Active" × — clear that filter)
• Multi-select tokens — selected categories rendered as removable pills
• Filter dropdown triggers ("All statuses" with a chevron)
• Compact toggleable pills inside facet sidebars

Import

import { Chip } from '@brikdesigns/bds';

Variants

Two variants × two appearances. Match the chip's role:

• secondary + solid — Default filter chip. High contrast.
• secondary + outline — Softer filter chip. Transparent + neutral border.
• primary + solid — Active/selected filter. Brand emphasis.
• primary + outline — Active filter with lower brand emphasis.

<Chip label="Design" variant="secondary" appearance="solid" />
<Chip label="Design" variant="primary" appearance="outline" />

Common shapes

Removable filter chip

<Chip label="Status: Active" onRemove={() => clearFilter('status')} />

Filter dropdown trigger

<Chip
  label="All statuses"
  icon={<FilterIcon />}
  showDropdown
  onChipClick={() => openMenu()}
/>

With avatar

<Chip label="Sarah Chen" avatar={<Avatar src={...} />} />

Disabled

<Chip label="Archived" disabled />

When not to use

• Don't duplicate FilterButton. If you're inside a FilterBar opening a dropdown, use FilterButton — it handles the state machine. Chip is for what comes after the choice.
• Don't use Chip for primary CTAs. It's compact by design. Form submits and primary workflows belong on a Button.

Accessibility

• Renders a <button> when interactive. Keyboard Enter/Space activates.
• onRemove adds a separate dismiss button with its own accessible name (aria-label="Remove {label}").
• showDropdown adds aria-haspopup="listbox" to the chip body.

API

CSS Override API

.filter-bar {
  --chip-hover-overlay: rgba(0, 0, 0, 0.08);
  --chip-pressed-overlay: rgba(0, 0, 0, 0.14);
}

Related

• Badge — read-only status sibling
• Tag — read-only categorization sibling
• FilterButton — dropdown trigger inside FilterBar
• Button — primary action shape
• Storybook playground