Chip

Compact interactive label. Use for filtering, tagging, or multi-select. Supports toggle state, dismiss, and icons.

Examples

NeutralPrimarySuccessWarningError

PrimarySuccessWarningError

ReactTypeScriptTailwindNext.js

ApprovedRejectedPending

SmallMedium

variant= 'neutral'

'neutral' | 'primary' | 'success' | 'warning' | 'error'

Colour style, applied to both default and selected states.

size= 'md'

'sm' | 'md'

Controls text size and padding.

selected= false

boolean

Filled selected state — use with onClick for toggleable chips.

onClick

() => void

Makes the chip a button with toggle behaviour. Sets aria-pressed.

onRemove

() => void

Renders a × button. e.stopPropagation is handled internally.

icon

ReactNode

Optional icon rendered before the label.

disabled= false

boolean

Dims and disables interaction.

Prop	Type	Default	Description
variant	'neutral' \| 'primary' \| 'success' \| 'warning' \| 'error'	'neutral'	Colour style, applied to both default and selected states.
size	'sm' \| 'md'	'md'	Controls text size and padding.
selected	boolean	false	Filled selected state — use with onClick for toggleable chips.
onClick	() => void	—	Makes the chip a button with toggle behaviour. Sets aria-pressed.
onRemove	() => void	—	Renders a × button. e.stopPropagation is handled internally.
icon	ReactNode	—	Optional icon rendered before the label.
disabled	boolean	false	Dims and disables interaction.