Chip

Open in Playground

Compact tag for filters and selections. onClick makes it a toggle button (with selected for the pressed state); onRemove adds a remove button; leading shows an icon or avatar first. tone (default, success, warning, danger, info) colours it, and filled makes the colour solid, so a Chip is also the component for a status label; use `Badge` only to overlay a count or dot on another element.

bananagogglesoveralls

MinionHappyHungryCaughtBello

HappyHungryCaughtBello

Props

selectedboolean
Filled style; also sets aria-pressed when onClick is given.
onClick(event) => void
Makes the chip a toggle button.
onRemove(event) => void
Adds a remove button.
removeLabelstring
Accessible name of the remove button (default "Remove <text>").
leadingReactNode
Icon or avatar shown before the text.
size'sm' | 'md'
Default: 'md'
Chip size.
tone'default' | 'success' | 'warning' | 'danger' | 'info'
Default: 'default'
Colour, for status labels.
filledboolean
Default: false
Solid fill in the tone colour instead of the tinted outline.
disabledboolean
Default: false
Disable the chip and its buttons.
classNamestring
Default: ''
Extra classes for the root element.
childrenReactNode
Content.
...rest
Any other props are passed to the underlying element.

Chip props
Prop	Type	Default	Description
`selected`	boolean	–	Filled style; also sets aria-pressed when `onClick` is given.
`onClick`	(event) => void	–	Makes the chip a toggle button.
`onRemove`	(event) => void	–	Adds a remove button.
`removeLabel`	string	–	Accessible name of the remove button (default "Remove <text>").
`leading`	ReactNode	–	Icon or avatar shown before the text.
`size`	'sm' \| 'md'	`'md'`	Chip size.
`tone`	'default' \| 'success' \| 'warning' \| 'danger' \| 'info'	`'default'`	Colour, for status labels.
`filled`	boolean	`false`	Solid fill in the tone colour instead of the tinted outline.
`disabled`	boolean	`false`	Disable the chip and its buttons.
`className`	string	`''`	Extra classes for the root element.
`children`	ReactNode	–	Content.
`...rest`		–	Any other props are passed to the underlying element.