# Chip

Compact pill-shaped labels. Use `ChipGroup` for coordinated single- or multi-select filter
chips, or `Pill` / `onRemove` for removable tags.

## Examples

### Default

```tsx
import { Chip, ChipGroup, Pill } from '@var-ui/react';

<ChipGroup
  selectionMode="multiple"
  selectedKeys={keys}
  onSelectionChange={setKeys}
  tone="accent"
>
  <Chip value="react">React</Chip>
  <Chip value="vue">Vue</Chip>
</ChipGroup>

<Pill onRemove={() => remove('docs')}>Documentation</Pill>
```

```astro
---
import { Chip, Pill } from '@var-ui/astro';
---

<Chip tone="accent">Static</Chip>
<Pill tone="neutral">Documentation</Pill>
```

```html
<span class="var-ui-chip" data-tone="accent">React</span>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| aria-label | string \| undefined | no |  | Accessible name when children are not plain text. |
| children | ReactNode | no |  |  |
| className | string \| undefined | no |  |  |
| isDisabled | boolean \| undefined | no |  |  |
| isSelected | boolean \| undefined | no |  | Selected state for standalone filter/toggle chips. |
| onChange | ((selected: boolean) => void) \| undefined | no |  | Called when a standalone toggle chip is pressed. |
| onRemove | (() => void) \| undefined | no |  | Shows a dismiss control and calls this handler on press. |
| removeLabel | string \| undefined | no | Remove | Accessible label for the remove button. |
| value | string \| undefined | no |  | Selection key when rendered inside `ChipGroup`. |
| appearance | SurfaceAppearance \| undefined | no |  |  |
| tone | ChipTone \| undefined | no |  |  |

## Accessibility

Toggle chips render as buttons with `aria-pressed`. Remove controls expose an accessible
dismiss label.