Chip

Warning alert:Deprecated feature

This component implementation has been deprecated in favor of a newer solution, and is no longer being maintained or enhanced. To learn more about deprecated components, visit about PatternFly.

Examples

Chip variants

Chips can be removable or read-only. The Overflow chip is a special chip that is used to expand or collapse the content of a chip group.

Chip 1

Really long chip that goes on and on

Chip 7

Read-only chip

Chip groups

A chip group is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When the value of numChips is exceeded, additional chips will be hidden using an overflow chip.

Chip one
Really long chip that goes on and on
Chip three

Chip groups with categories

Chip one
Really long chip that goes on and on
Chip three

Chip groups with removable categories

Chip one
Chip two
Chip three

Chip one
Chip two
Chip three

Props

Chip

*required
Name	Type	Default	Description
badge	React.ReactNode		Badge to add to the chip. The badge will be rendered after the chip text.
children	React.ReactNode		Content rendered inside the chip text
className	string	''	Additional classes added to the chip item
closeBtnAriaLabel	string		Aria Label for close button
Deprecated: component	React.ReactNode		Component that will be used for chip. It is recommended that <button> or <li> are used when the chip is an overflow chip.
isOverflowChip	boolean	false	Flag indicating if the chip is an overflow chip
isReadOnly	boolean	false	Flag indicating if chip is read only
onClick	(event: React.MouseEvent) => void	(_e: React.MouseEvent) => undefined as any	Function that is called when clicking on the chip close button
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
textMaxWidth	string	'16ch'	Css property expressed in percentage or any css unit that overrides the default value of the max-width of the chip's text
tooltipPosition	\| TooltipPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'	'top'	Position of the tooltip which is displayed if text is longer

ChipGroup

*required
Name	Type	Default	Description
aria-label	string	'Chip group category'	Aria label for chip group that does not have a category name
categoryName	string	''	Category name text for the chip group category. If this prop is supplied the chip group with have a label and category styling applied
children	React.ReactNode		Content rendered inside the chip group. Should be <Chip> elements.
className	string		Additional classes added to the chip item
closeBtnAriaLabel	string	'Close chip group'	Aria label for close button
collapsedText	string	'${remaining} more'	Customizable template string. Use variable "${remaining}" for the overflow chip count.
defaultIsOpen	boolean	false	Flag for having the chip group default to expanded
expandedText	string	'Show Less'	Customizable "Show Less" text string
isClosable	boolean	false	Flag if chip group can be closed
numChips	number	3	Set number of chips to show before overflow
onClick	(event: React.MouseEvent) => void		Function that is called when clicking on the chip group close button or on an overflow chip
Deprecated: onOverflowChipClick	(event: React.MouseEvent) => void		Function that is called when clicking on the overflow (expand/collapse) chip button
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
tooltipPosition	\| TooltipPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'	'top'	Position of the tooltip which is displayed if the category name text is longer

CSS variables

Prefixed with 'pf-v6-c-chip'

Expand or collapse column	Selector	Variable	Value

Prefixed with 'pf-v6-c-chip-group'

Expand or collapse column	Selector	Variable	Value

Edit this page on GitHub