Chip

Chip is a compact UI element used to represent filters, tags, or selections.
It supports selection, removal, icons, and keyboard interaction, and is fully theme-aware.

---

Usage

Basic usage

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

<Chip>Label</Chip>;

Selectable chip

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

Removable chip

<Chip removable onRemove={() => console.log('removed')}>
  Filter
</Chip>

---

Variants

Chip does not use named variants. Instead, visual emphasis is controlled via state.

<Chip>Default</Chip>
<Chip selected>Selected</Chip>

Available states:

• default – neutral background
• selected – highlighted with primary color

Guidelines:

• Use selected for active filters or chosen items.
• Avoid mixing multiple selected chips unless multi-select is intentional.

---

Sizes

<Chip size="sm">Small</Chip>
<Chip size="md">Medium</Chip>

Available sizes:

• sm – compact UI (dense lists, toolbars)
• md (default) – standard usage

---

States

<Chip selected />
<Chip removable />

State behavior:

• selected

  • Changes background and text color
  • Indicates active or chosen state

• removable

  • Shows a close (×) button
  • Remove action does not trigger selection

---

Native Props / Composition

Chip is rendered as an interactive <div> with button-like behavior.

<Chip onSelect={handleSelect} className="my-chip">
  Custom
</Chip>

Custom styling:

<Chip className="chip-warning">Warning</Chip>

---

Props

Prop	Type	Default	Description
children	React.ReactNode	—	Chip label content
removable	boolean	false	Shows remove button
selected	boolean	false	Selected visual state
iconLeft	React.ReactNode	—	Icon before label
iconRight	React.ReactNode	—	Icon after label
size	"sm" | "md"	md	Chip size
onRemove	() => void	—	Called when remove button is clicked
onSelect	() => void	—	Called on click or keyboard select
className	string	""	Additional CSS classes

---

Behavior Notes

• Clicking the chip triggers onSelect.

• Pressing Enter or Space also triggers onSelect.

• Clicking the remove button:

  • Stops event propagation
  • Calls onRemove only

• Selection state is controlled by the parent.

<Chip selected={isActive} onSelect={toggleActive} />

---

Accessibility

• Renders as an interactive element with role="button"

• Keyboard support:

  • Tab to focus
  • Enter / Space to select

• Remove button:

  • Rendered as a native <button>
  • Includes aria-label="Remove"

Example:

<Chip removable aria-label="Remove filter">
  Filter
</Chip>

---

Layout

• Inline-flex element
• Sizes itself to content
• Works naturally inside flex or wrap layouts

<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
  <Chip>Tag 1</Chip>
  <Chip>Tag 2</Chip>
</div>

---

Best Practices

Do

• Use chips for filters, tags, and quick selections.
• Control selected state from the parent.
• Use removable for user-editable collections.

Don’t

• Use chips as primary navigation.
• Overload chips with long text.
• Nest complex interactive elements inside chips.