# Chip

```tsx
import { Chip } from '@tangible/ui';
```

Interactive docs and examples: [Chip in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-chip--docs).

## Chip props

| Prop | Type | Default | Description |
| - | - | - | - |
| `children` | `React.ReactNode` | | |
| `as?` | `"a" \| "div" \| "span"` | `'span'` | HTML element to render. `'span'` (default): Inline element. Use for chips within text flow, inline lists, or inside `<p>`/`<li>` elements. `'div'`: Block element. Use when the chip contains block-level content or needs to be a flex/grid child without inline constraints. `'a'`: Anchor element. Use for navigational chips with an `href`. |
| `className?` | `string` | | |
| `disabled?` | `boolean` | | |
| `href?` | `string` | | |
| `interactive?` | `boolean` | | |
| `leftIcon?` | `React.ReactNode` | | |
| `onClick?` | `React.MouseEventHandler<HTMLElement>` | | |
| `onRemove?` | `React.MouseEventHandler<HTMLButtonElement>` | | When provided, renders a trailing remove (×) button after the content. The button is a real `<button>` — the only focusable target in the chip — so the chip body stays non-interactive. Intended for token/tag patterns (MultiSelect, MultiCombobox). Combining `onRemove` with an interactive chip (`onClick` or ChipGroup) nests interactive elements and warns in dev. |
| `rel?` | `string` | | |
| `removeLabel?` | `string` | `'Remove'` | Accessible label for the remove button. Pass a specific label like `Remove Alice` for context. |
| `rightIcon?` | `React.ReactNode` | | |
| `selected?` | `boolean` | | |
| `size?` | `"lg" \| "md" \| "sm" \| "xs"` | `'md'` | |
| `target?` | `React.HTMLAttributeAnchorTarget` | | |
| `theme?` | `"danger" \| "primary" \| "secondary" \| "success" \| "warning"` | `'secondary'` | |
| `value?` | `OptionValue` | | When inside ChipGroup, identifies this chip for selection tracking |
| `variant?` | `"default" \| "flush" \| "ghost" \| "outline" \| "solid"` | `'default'` | |

Also accepts the standard attributes of `HTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

## Examples

Stories: Basic, With Icon, Icon Placement, As Link, Themes, Variants, Sizes, Interactive, Disabled, Selected / Pressed, Icon Only, Removable (token row), Removable (themes & sizes) ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-chip--docs)).

## Component API tokens

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.

- `--tui-chip-bg`
- `--tui-chip-fg`
- `--tui-chip-border`
- `--tui-chip-icon`
- `--tui-chip-icon-scale`
- `--tui-chip-radius`
- `--tui-chip-selected-ring`
- `--tui-chip-icon-slot-bg`
- `--tui-chip-icon-slot-fg`

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/primitives-chip--docs