Chip

Chip is a small, interactive label used for filters, selected items, tags, or multi-select interfaces.

It supports removal (onRemove) and click interactions.

Basic Usage

<Chip>React</Chip>

React

Removable Chips (Common for Filters)

<Chip variant="info" onRemove={() => console.log('Removed React')}>
  React
</Chip>

React

Variants

DefaultInfoSuccessWarningDanger

Sizes

SmallMediumLarge

With Icon

<Chip size="lg" icon="🏷️" variant="warning">
  Important
</Chip>

🏷️

Important

Interactive / Selectable

<Chip 
  variant="success" 
  onClick={() => console.log('Toggled')}
>
  Active
</Chip>

Active

Props

Prop	Type	Default	Description
variant	'default' | 'info' | 'success' | 'warning' | 'danger'	'default'	Semantic color
size	'sm' | 'md' | 'lg'	'md'	Size of the chip
icon	ReactNode	—	Optional leading icon
onClick	function	—	Makes chip clickable
onRemove	function	—	Shows remove (×) button
disabled	boolean	false	Disables interaction

Accessibility

• Proper role and aria-disabled when interactive
• Keyboard focus support
• Clear visual distinction for removable state

Best Practices

• Use onRemove for filter chips
• Use onClick for toggle/selection chips
• Keep text short (1–2 words ideal)
• Prefer Tag for static non-interactive labels

Related Components

• Tag — Static, lighter labels
• Badge — Status-oriented labels

Next: Tag →