Chip

Compact element for tags, filters, or selections. Supports optional icon and count badge with hover interactions.

When to use

check_circleWhen to use

  • For displaying tags or categories
  • For filter selections
  • When showing a count associated with a category
  • For compact, actionable labels

cancelWhen not to use

  • For primary actions (use Button instead)
  • For navigation items (use NavItem instead)
  • When the content is too long for a compact display

Variants

Default

All chip variations

addAI Adoption
9
With icon & count
Design Systems
15
No icon
codeReact
No count
Tag
Label only

Hover State

addAI Adoption
29
Hover

Different Icons

Examples

addAdd
starStar
checkCheck
closeClose
settingsSettings

Usage

tsx
import { Chip } from '@/components/Chip';

// With icon and count
<Chip label="AI Adoption" count={29} />

// Without icon
<Chip label="Design Systems" showLeftIcon={false} count={15} />

// Without count
<Chip label="React" leftIcon="code" showCount={false} />

// Label only
<Chip label="Tag" showLeftIcon={false} showCount={false} />

Props

PropTypeDefaultDescription
label*string-Text label for the chip
leftIconstring'add'Material Symbols icon name for left icon
countstring | numberundefinedCount value displayed in badge
showLeftIconbooleantrueWhether to show the left icon
showCountbooleantrueWhether to show the count badge

Accessibility

  • Uses semantic <button> element when clickable
  • Icons have aria-hidden="true"
  • Hover and focus states are visually distinct
  • Supports keyboard navigation