# Chip

**When to use:** Compact tag, label, or filter token — selected items, applied filters, category badges, user avatars with remove.

**Keywords:** pill

**Import:** `import { Chip, ChipContainer, ChipStyleType, ThemeColor } from '@ahrowe/ui'`

**Styles:** `ChipStyleType.Light` (default) | `ChipStyleType.Filled` | `ChipStyleType.Outlined`, in any `color`: a `ThemeColor` (default `Neutral`) or any CSS colour, see [ThemeColor.md](ThemeColor.md).

```tsx
import { Chip, ChipContainer, ChipStyleType, ThemeColor } from '@ahrowe/ui';

// Basic chip
<Chip text="React" />

// Colours: a light tint by default
<Chip text="Warning" color={ThemeColor.Warn} />
<Chip text="Error" color={ThemeColor.Error} />

// A selected filter: filled in the primary colour
<Chip text="Active" styleType={ChipStyleType.Filled} color={ThemeColor.Primary} onClick={toggle} />

// Removable chip
<Chip
  text="TypeScript"
  showRemoveIcon
  onRemove={() => removeTag('TypeScript')}
/>

// Chip with thumbnail (avatar)
<Chip text="Jane Doe" thumbnail="https://example.com/avatar.jpg" />

// Clickable chip
<Chip text="Filter: Active" onClick={handleFilterClick} />

// Group of chips in a wrapping container
<ChipContainer>
  {tags.map(tag => (
    <Chip key={tag} text={tag} showRemoveIcon onRemove={() => removeTag(tag)} />
  ))}
</ChipContainer>

// Inline (no wrapping)
<ChipContainer inline>
  <Chip text="A" /><Chip text="B" />
</ChipContainer>
```

**Enums:**

- `ChipStyleType`: `Light` (default) | `Filled` | `Outlined`

**ChipProps:**

| Prop | Type | Description |
|------|------|-------------|
| `text` | `string` | Chip label |
| `styleType` | `ChipStyleType` | `Light` (default), `Filled` or `Outlined` |
| `color` | `ColorValue` | A `ThemeColor` (default `Neutral`) or any CSS colour |
| `thumbnail` | `string` | Avatar image URL |
| `labels.remove` | `string` | Accessible name for the remove button. Default: `'Remove'` |
| `showRemoveIcon` | `boolean` | Show × icon |
| `onRemove` | `() => void` | Remove button handler |
| `onClick` | `() => void` | Makes chip clickable |

**ChipContainerProps:**

| Prop | Type | Description |
|------|------|-------------|
| `inline` | `boolean` | Inline layout (default wraps) |

**Labels:** `remove` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `ChipLabels`.

**Slots:** `root` `inner` `thumbnail` `text` `removeIcon`

## Migration from colour styles

Before 0.43, `ChipStyleType` was a colour, and `Primary` was filled while the others were a light
tint. Style and colour are now separate props. The old members are gone and TypeScript points at
each:

| Before | After |
|--------|-------|
| `styleType={ChipStyleType.Default}` | nothing: `Light` `Neutral` is the default |
| `styleType={ChipStyleType.Primary}` | `styleType={ChipStyleType.Filled} color={ThemeColor.Primary}` |
| `styleType={ChipStyleType.Info}` (and `Warn`, `Error`) | `color={ThemeColor.Info}` |