Chip

data-display

Compact pill-shaped element for tags, filters, and selections. Supports selected state, removable mode, leading icon, and keyboard interaction. Uses role=option with aria-selected for interactive chips.

Import

typescript
import { Chip } from "packages/ui/src";

Props

ChipProps

PropTypeRequired
childrenReactNodeYes
selectedbooleanNo
onClick() => void, removable?: boolean, onRemove?: () => void, icon?: ReactNodeNo

Examples

Chip

Compact elements for tags, filters, and selections with optional icon and remove button.

Static Tags

Design SystemToken PipelineWCAG 2.1 AADTCG Format

Selectable Filters

DesignTokensComponentsPipelineDeployTesting

Selected: Design, Components

Removable Tags

ReactNext.jsTypeScriptDTCG

With Icon

StarredPrivateVerified

Metadata

Component Metadata
Familydata-display
FrameworksNext.js, Astro/EmDash
DescriptionCompact pill-shaped element for tags, filters, and selections. Supports selected state, removable mode, leading icon, and keyboard interaction. Uses role=option with aria-selected for interactive chips.
PropsChipProps (children: ReactNode, selected?: boolean, onClick?: () => void, removable?: boolean, onRemove?: () => void, icon?: ReactNode)
Statesdefault, selected, hover, removable, with-icon
A11y
  • role=option with aria-selected for interactive chips
  • Keyboard selection via Space and Enter
  • Remove button with aria-label
  • Icon aria-hidden
Responsive
  • Wraps in flex container
  • Fixed height from padding tokens
Motion
  • Background color transition on hover
  • Remove icon color transition
Token Dependencies
  • components.chip.background
  • components.chip.textColor
  • components.chip.borderRadius
  • components.chip.paddingX
  • components.chip.paddingY
  • components.chip.fontSize
  • components.chip.fontWeight
  • components.chip.gap
  • components.chip.selectedBackground
  • components.chip.selectedTextColor
  • components.chip.hoverBackground
  • components.chip.removeColor
  • components.chip.removeHoverColor
Content Slotschildren (ReactNode — label), icon (ReactNode — leading visual)
CMS Bindings
  • Tag list from CMS taxonomy
  • Category filters from collection
Test Cases
  • Renders children as label
  • Applies selected class
  • Calls onClick on click
  • Shows remove button when removable
  • Calls onRemove on remove click
  • Renders icon
  • Has role=option when interactive
  • Passes className through