# Chip

A compact label that links or can be removed, with a group that wraps or scrolls. For choices, use ToggleGroup.

- **Use it for**: Removable selections or tag links in a row.
- **Not for**: Choosing between options; that is a ToggleGroup. Try [ToggleGroup](https://unseenui.com/components/toggle-group/), [Tag](https://unseenui.com/components/tag/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { Chip } from '@stackunseen/ui';
import { ChipGroup } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<ChipGroup label="Lens"><Chip pressed={lens === "agents"} onPressedChange={() => setLens("agents")}>Agents</Chip></ChipGroup>
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `active` | `boolean` | Marks the chip as the current filter with aria-current. |
| `children` (required) | `ReactNode` |  |
| `className` | `string` |  |
| `current` | `"time" \| "date" \| "true" \| "step" \| "page" \| "location"` | The aria-current token for an active chip; "true" suits a filter, "page" a destination. |
| `disabled` | `boolean` |  |
| `href` | `string` |  |
| `onRemove` | `undefined \| () => void` |  |
| `removeLabel` | `string` | Accessible name of the remove control; defaults to "Remove" plus the chip text. |
| `size` | `"default" \| "sm"` |  |
| `style` | `CSSProperties` |  |
| `swatch` | `string` | A colour or a CSS custom property reference, shown as a leading dot. |

## Keyboard

Link chips are links; the remove control is a button. Backspace or Delete on a removable chip removes it.

## Works with

[ToggleGroup](https://unseenui.com/components/toggle-group/), [CopyButton](https://unseenui.com/components/copy-button/), [AppearanceToggle](https://unseenui.com/components/appearance-toggle/), [Button](https://unseenui.com/components/button/), [IconButton](https://unseenui.com/components/icon-button/)

Page: https://unseenui.com/components/chip/