Chip

Variants

Sizes

Interactive

Chip: a compact element representing an input, attribute, or action.

import 'flint-ui'; // auto-registers all
// or
import { FlintChip } from 'flint-ui';

html

<flint-chip></flint-chip>

Property	Attribute	Type	Default	Description
`label`	`label`	`string`	`''`	Text content displayed inside the chip.
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`	Visual style variant of the chip.
`color`	`color`	`'default' \| 'primary' \| 'secondary'`	`'default'`	Color theme applied to the chip.
`size`	`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the chip.
`clickable`	`clickable`	`boolean`	`false`	Whether the chip responds to click interactions.
`deletable`	`deletable`	`boolean`	`false`	Whether the chip shows a delete icon.
`disabled`	`disabled`	`boolean`	`false`	Disables the chip and prevents interaction.

Event	Detail	Description
`flint-chip-delete`	—	Fired when the chip's delete icon is clicked.
`click`	—

Name	Description
`avatar`
`icon`

Chip ​