Skip to content
Feedback

Chip

Pill-shaped labels for filters and removable tags.

React source Astro source Core source

Chip

Compact pill-shaped labels. Use ChipGroup for coordinated single- or multi-select filter chips, or Pill / onRemove for removable tags.

Examples

Default

DocsAPI
Demo.tsxtsx
import { Chip, ChipGroup, Pill } from '@var-ui/react';

<ChipGroup
  selectionMode="multiple"
  selectedKeys={keys}
  onSelectionChange={setKeys}
  tone="accent"
>
  <Chip value="react">React</Chip>
  <Chip value="vue">Vue</Chip>
</ChipGroup>

<Pill onRemove={() => remove('docs')}>Documentation</Pill>

Props

Accessibility

Toggle chips render as buttons with aria-pressed. Remove controls expose an accessible dismiss label.