Chip

A compact element used to represent tags, filters, or selections with optional avatars, social icons, and removable states.

npx chilli@latest add chip

Small

Medium

Large

Extra Large

Fill

Light

Fill Avatar

Light Avatar

Alice

Bob

Charlie

Diana

React

TypeScript

Tailwind

Figma

Prop	Type	Default	Description
`variant`	`"default" \| "avatar" \| "social"`	`"default"`	The visual variant of the chip.
`type`	`"fill" \| "light"`	`"fill"`	The background style — filled or outlined.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	The size of the chip.
`label`	`string`	`—`	The text content of the chip.
`avatarSrc`	`string`	`—`	Image source for the avatar variant.
`socialIcon`	`ReactNode`	`—`	Icon element for the social variant.
`onRemove`	`() => void`	`—`	Callback when remove button is clicked. Shows remove icon when provided.
`className`	`string`	`—`	Additional CSS classes.