Chip

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

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

Props

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

Usage

Chip (Medium)

Chip (Small)

1import { Chip } from "@sanity/sanity-id/components/chip"
2
3export default () => {
4        return (
5          <div className="grid grid-cols-[repeat(4,max-content)] gap-16">
6            <Chip size="md">Chip (Medium)</Chip>
7            <Chip size="md" state="active">Chip (Medium)</Chip>
8            <Chip size="md" letterCase="uppercase">Chip (Medium)</Chip>
9            <Chip size="md" letterCase="uppercase" state="active">Chip (Medium)</Chip>
10            <Chip size="md" deleteIcon>Chip (Medium)</Chip>
11            <Chip size="md" state="active" deleteIcon>Chip (Medium)</Chip>
12            <Chip size="md" letterCase="uppercase" deleteIcon>Chip (Medium)</Chip>
13            <Chip size="md" letterCase="uppercase" state="active" deleteIcon>Chip (Medium)</Chip>
14            <Chip size="sm">Chip (Small)</Chip>
15            <Chip size="sm" state="active">Chip (Small)</Chip>
16            <Chip size="sm" letterCase="uppercase">Chip (Small)</Chip>
17            <Chip size="sm" letterCase="uppercase" state="active">Chip (Small)</Chip>
18            <Chip size="sm" deleteIcon>Chip (Small)</Chip>
19            <Chip size="sm" state="active" deleteIcon>Chip (Small)</Chip>
20            <Chip size="sm" letterCase="uppercase" deleteIcon>Chip (Small)</Chip>
21            <Chip size="sm" letterCase="uppercase" state="active" deleteIcon>Chip (Small)</Chip>
22          </div>
23        )
24      }