---
title: "Chip"
description: "A compact, optionally dismissible token — for filters, tags, and selections."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/chip"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/chip.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Chip

A compact, optionally dismissible token — for filters, tags, and selections.

```tsx
import { Chip } from "@sanity/sanity-id/components/chip"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `string` | no | — | Text content of the chip |
| `className` | `string` | no | — | Additional CSS classes |
| `deleteIcon` | `boolean` | no | `false` | Displays a delete/close button inside the chip |
| `letterCase` | `"normal" \| "uppercase"` | no | `"normal"` | Text casing applied to the chip label |
| `onDelete` | `(event: MouseEvent<HTMLButtonElement>) => void` | no | — | Called when the delete button is clicked |
| `size` | `"sm" \| "md"` | no | `"md"` | Size of the chip |
| `state` | `"default" \| "active"` | no | `"default"` | Visual state of the chip |

## Usage

```tsx
import { Chip } from "@sanity/sanity-id/components/chip"

export default () => {
	return (
		<div className="grid grid-cols-[repeat(4,max-content)] gap-16">
			<Chip size="md">Chip (Medium)</Chip>
			<Chip size="md" state="active">Chip (Medium)</Chip>
			<Chip size="md" letterCase="uppercase">Chip (Medium)</Chip>
			<Chip size="md" letterCase="uppercase" state="active">Chip (Medium)</Chip>
			<Chip size="md" deleteIcon>Chip (Medium)</Chip>
			<Chip size="md" state="active" deleteIcon>Chip (Medium)</Chip>
			<Chip size="md" letterCase="uppercase" deleteIcon>Chip (Medium)</Chip>
			<Chip size="md" letterCase="uppercase" state="active" deleteIcon>Chip (Medium)</Chip>
			<Chip size="sm">Chip (Small)</Chip>
			<Chip size="sm" state="active">Chip (Small)</Chip>
			<Chip size="sm" letterCase="uppercase">Chip (Small)</Chip>
			<Chip size="sm" letterCase="uppercase" state="active">Chip (Small)</Chip>
			<Chip size="sm" deleteIcon>Chip (Small)</Chip>
			<Chip size="sm" state="active" deleteIcon>Chip (Small)</Chip>
			<Chip size="sm" letterCase="uppercase" deleteIcon>Chip (Small)</Chip>
			<Chip size="sm" letterCase="uppercase" state="active" deleteIcon>Chip (Small)</Chip>
		</div>
	)
}
```