To help people enter information, make selections, filter content, or trigger actions.

ChipProps

Change the component to the HTML tag or custom component of the only child.

asChild

boolean

Configures a toggleButton aria-pressed initial value

defaultPressed

Main style of the chip.

- `filled`: Chip will be plain.

- `outlined`: Chip will be transparent with an outline.

- `tinted`: Chip will be filled but using a lighter color scheme.

- `dashed`: Chip will be transparent with an outline dashed.

design

enum

Disable the chip, preventing user interaction and adding opacity.

disabled

intent

onClear

(event?: React.MouseEvent<HTMLButtonElement>) => void

onClick

(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, args: { pressed: boolean; value?: string | number | readonly string[]; }) => void

Configures a toggleButton aria-pressed value

pressed

isBordered

ChipClearButtonProps

label

string

TypeLiteral

defaultValue

string | number | readonly string[]

onKeyDown

(event: React.KeyboardEvent<HTMLButtonElement>) => void

value

Chip

@spark-ui/chip

Chip

Install#

Import#