Chip group

A chip group is used to represent an attribute that has been assigned one or more values. An OR relationship is implied between values in the group. Chip groups are useful to express complex filters to a data set, for example. Related design guidelines: Filters

Examples Props CSS Variables

Examples

Single

Chip 1

Really long Chip that goes on and on

Chip7

Read-only Chip

Multi select

Chip 1
Really long chip that goes on and on
Chip 3

Badge

Lemons10
Limes8

Props

Chip properties
Name	Type	Required	Default	Description
children	React.ReactNode	No		Content rendered inside the chip text
closeBtnAriaLabel	string	No	'close'	Aria Label for close button
className	string	No	''	Additional classes added to the chip item
isOverflowChip	boolean	No	false	Flag indicating if the chip has overflow
isReadOnly	boolean	No	false	Flag if chip is read only
onClick	(event: React.MouseEvent) => void	No	(_e: React.MouseEvent) => undefined as any	Function that is called when clicking on the chip button
component	React.ReactNode	No	'div'	Internal flag for which component will be used for chip
tooltipPosition	'auto' \| 'top' \| 'bottom' \| 'left' \| 'right'	No	'top'	Position of the tooltip which is displayed if text is longer

ChipGroup properties
Name	Type	Required	Default	Description
children	React.ReactNode	No		Content rendered inside the chip text
className	string	No	''	Additional classes added to the chip item
defaultIsOpen	boolean	No	false	Flag for having the chip group default to expanded
expandedText	string	No	'Show Less'	Customizable "Show Less" text string
collapsedText	string	No	'${remaining} more'	Customizeable template string. Use variable "${remaining}" for the overflow chip count.
withToolbar	boolean	No	false	Flag for grouping with a toolbar & category name
headingLevel	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	No		Set heading level to the chip item label
numChips	number	No	3	Set number of chips to show before overflow

ChipGroupToolbarItem properties
Name	Type	Required	Default	Description
categoryName	string	No	''	Category name text
children	React.ReactNode	No	null	Content rendered inside the chip text
className	string	No	''	Additional classes added to the chip item
isClosable	boolean	No	false	Flag if chip group can be closed
onClick	(event: React.MouseEvent) => void	No	(_e: React.MouseEvent) => undefined as any	Function that is called when clicking on the chip group button
closeBtnAriaLabel	string	No	'Close chip group'	Aria label for close button
tooltipPosition	'auto' \| 'top' \| 'bottom' \| 'left' \| 'right'	No	'top'	Position of the tooltip which is displayed if the category name text is longer

CSS Variables


	.pf-c-chip	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-chip	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-chip	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-chip	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-chip	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-chip	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-chip	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-chip	--pf-c-chip--PaddingTop	0.375rem
--pf-c-chip--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-chip	--pf-c-chip--PaddingRight	0.5rem
--pf-c-chip--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-chip	--pf-c-chip--PaddingBottom	0.375rem
--pf-c-chip--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-chip	--pf-c-chip--PaddingLeft	0.5rem
--pf-c-chip--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-chip	--pf-c-chip--BackgroundColor	#fff
--pf-c-chip--BackgroundColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-chip	--pf-c-chip--BorderRadius	3px
--pf-c-chip--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-chip	--pf-c-chip--before--BorderColor	#f0f0f0
--pf-c-chip--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-chip	--pf-c-chip--before--BorderWidth	1px
--pf-c-chip--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-chip	--pf-c-chip--before--BorderRadius	3px
--pf-c-chip--before--BorderRadius --pf-c-chip--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-chip	--pf-c-chip--m-overflow__text--Color	#06c
--pf-c-chip--m-overflow__text--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-chip	--pf-c-chip__text--FontSize	0.75rem
--pf-c-chip__text--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-chip	--pf-c-chip__text--Color	#151515
--pf-c-chip__text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-chip	--pf-c-chip__text--MaxWidth	7.5rem
	.pf-c-chip	--pf-c-chip__c-button--PaddingLeft	0.5rem
--pf-c-chip__c-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-chip	--pf-c-chip__c-button--PaddingRight	0.5rem
--pf-c-chip__c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-chip	--pf-c-chip__c-button--MarginTop	calc(0.375rem * -1)
--pf-c-chip__c-button--MarginTop calc(--pf-c-chip--PaddingTop * -1) calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-chip	--pf-c-chip__c-button--MarginRight	calc(0.5rem / 2 * -1)
--pf-c-chip__c-button--MarginRight calc(--pf-c-chip--PaddingRight / 2 * -1) calc(--pf-global--spacer--sm / 2 * -1) calc($pf-global--spacer--sm / 2 * -1) calc(pf-size-prem(8px) / 2 * -1) calc(0.5rem / 2 * -1)
	.pf-c-chip	--pf-c-chip__c-button--MarginBottom	calc(0.375rem * -1)
--pf-c-chip__c-button--MarginBottom calc(--pf-c-chip--PaddingBottom * -1) calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-chip	--pf-c-chip__c-button--FontSize	0.75rem
--pf-c-chip__c-button--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-chip	--pf-c-chip__c-badge--MarginLeft	0.25rem
--pf-c-chip__c-badge--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-chip .pf-c-button	--pf-c-button--PaddingRight	0.5rem
--pf-c-button--PaddingRight --pf-c-chip__c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-chip .pf-c-button	--pf-c-button--PaddingLeft	0.5rem
--pf-c-button--PaddingLeft --pf-c-chip__c-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-chip .pf-c-button	--pf-c-button--FontSize	0.75rem
--pf-c-button--FontSize --pf-c-chip__c-button--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem

Chip group

Examples

Single

Toolbar

Category 1 has a very long name

Category 2

Category 3