# Chip

Compact pill for filters, suggestions, tags and inputs, in solid, outline and glass styles. Selecting a chip fills it quickly and it settles into place without a bounce.

> Primitive · Free · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add chip
```

## Import

```tsx
import { Chip } from "@/components/ui/chip/chip";
```

## Variants

- `filters` — Filters: `npx @lumioui/cli add chip-filters`
- `glass` — Glass: `npx @lumioui/cli add chip-glass`
- `removable` — Removable: `npx @lumioui/cli add chip-removable`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"assist" | "filter" | "input" | "suggestion" | "glass"` | Chip visual intent — "glass" renders a glass pill. |
| `size?` | `"sm" | "md"` | Density preset — "sm" for dense rails (filters, metadata tags). |
| `selected?` | `boolean` | Controlled selected / active state. Omit for uncontrolled use with  `defaultSelected`/`onSelectedChange`. |
| `defaultSelected?` | `boolean` | Initial selected state for uncontrolled use. Chips that opt into  uncontrolled selection (via this prop or `onSelectedChange`) toggle  themselves on press; plain action chips keep their current behavior. |
| `onSelectedChange?` | `(selected: boolean) => void` | Called when the user toggles selection. In controlled mode this is the  change intent; in uncontrolled mode it also fires after the internal  state flips. |
| `onPress?` | `(e: GestureResponderEvent) => void | Promise<unknown>` | Called on press. May return a Promise — when `asyncTracking` is on the  chip enters its loading state until the promise resolves. |
| `onDelete?` | `() => void` | Delete handler — shows a trailing × button. |
| `icon?` | `React.ReactNode` | Leading icon or avatar. |
| `textClassName?` | `string` | Extra classes for the label. |
| `className?` | `string` | Extra classes for the container. |
| `selectedClassName?` | `string` | Extra classes for the container applied only while `selected` — the  escape hatch for accent-idiom fills (e.g. a lime pill on a dark canvas)  that the primary-tinted selected variant can't express. |
| `selectedTextClassName?` | `string` | Extra classes for the label applied only while `selected`. |
| `asyncTracking?` | `boolean` | Auto-track async onPress — when onPress returns a Promise, the chip  automatically enters loading state until it resolves. Default true. |
| `children?` | `React.ReactNode` | — |

## Icons rendered

- `x` — /icons.html?i=x

Source: https://lumioui.com/components/chip