Chip

A compact element for displaying tags, filters, or selections. Supports dismissible and selectable behaviors.

Variants

Prop	Type	Default	Description
`variant`	`"solid" \| "outline"`	`"solid"`	Visual style variant.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size preset.
`onDismiss`	`() => void`	—	Called when the dismiss button is clicked. Shows a dismiss icon when provided.
`selected`	`boolean`	`false`	Whether the chip is selected (controlled).
`onSelectedChange`	`(selected: boolean) => void`	—	Called when the selected state changes.
`disabled`	`boolean`	`false`	Disables the chip.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

variant"solid"

"solid" | "outline"

Visual style variant.

color"blue"

Accent color.

size"md"

"sm" | "md" | "lg"

Size preset.

onDismiss

() => void

Called when the dismiss button is clicked. Shows a dismiss icon when provided.

selectedfalse

boolean

Whether the chip is selected (controlled).

onSelectedChange

(selected: boolean) => void

Called when the selected state changes.

disabledfalse

boolean

Disables the chip.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}