Chip

Variants

Sizes

Interactive

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

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintChip } from '@getufy/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`	`Size`	`'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-click`	—	Fired when a clickable chip is clicked.
`flint-chip-delete`	`{ value: string }`	Fired when the chip's delete icon is clicked. detail: `{ value: string }`

Name	Description
`(default)`	Text content for the chip (alternative to the `label` prop).
`avatar`	Avatar element shown at start.
`icon`	Icon shown at start when no avatar.

Name	Description
`base`	The chip's base wrapper element.
`label`	The label text element.
`delete-icon`	The delete button element.

Chip ​