Chip

A composable, accessible Chip component for modern React applications.

import { Chip } from '@nofinite/nui';

Interactive Preview

A compact pill-shaped component used to represent selections, filters, or small entities. Supports selection state, removability, icons, sizes, and keyboard-accessible interaction.

Usage

Basic Chip

import { Chip } from '@nofinite/nui';

<Chip>React</Chip>

<Chip size="sm">Small chip</Chip>

Selectable Chip

<Chip selected onSelect={() => console.log('Selected')}>
  Selected Chip
</Chip>

Removable Chip

<Chip removable onRemove={() => console.log('Removed')}>
  Removable
</Chip>

Chip with Icons

<Chip iconLeft={<Icon />} iconRight={<Icon />}>
  Messages
</Chip>

Interactive Chip

<Chip onSelect={() => console.log('Clicked')}>Clickable Chip</Chip>

Variants

Chip supports interaction-based variants.

<Chip />                       // Default chip
<Chip selected />              // Selected chip
<Chip onSelect={() => {}} />   // Interactive chip
<Chip removable />             // Removable chip

Available variants:

• default – Static chip
• selected – Active chip with highlighted background
• interactive – Chip that responds to click and keyboard interaction
• removable – Chip with remove action

Guidelines:

• Use selected for filter or tag selection states.
• Use interactive when chip triggers an action.
• Use removable for dynamic lists like tags or recipients.

Sizes

States

Accessibility

• Interactive chips receive role="button"
• Keyboard interaction via Enter and Space
• aria-pressed reflects selected state
• Remove button is separately focusable and accessible
• Focus-visible ring improves keyboard navigation

Best Practices

Do

• Use chips for filters, tags, or selected items
• Provide remove action for user-generated tags
• Use selected state to show active filters
• Keep chip text short

Don’t

• Use chips for primary navigation
• Overload chips with long content
• Hide remove actions behind complex gestures

API Reference