Skip to content
Patternfly Logo

Chip group

Examples

Simple inline

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

With categories

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

With removable categories

Category one
  • Chip one
  • Chip two
  • Chip three


Category two has a very long name
  • Chip one
  • Chip two
  • Chip three

Props

Chip

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the chip text
classNamestring''Additional classes added to the chip item
closeBtnAriaLabelstring'close'Aria Label for close button
componentReact.ReactNode'div'Component that will be used for chip. It is recommended that <button> or <li> are used when the chip is an overflow chip.
isOverflowChipbooleanfalseFlag indicating if the chip is an overflow chip
isReadOnlybooleanfalseFlag indicating if chip is read only
onClick(event: React.MouseEvent) => void(_e: React.MouseEvent) => undefined as anyFunction that is called when clicking on the chip close button
tooltipPositionTooltipPosition | '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
NameTypeDefaultDescription
aria-labelstring'Chip group category'Aria label for chip group that does not have a category name
categoryNamestring''Category name text for the chip group category. If this prop is supplied the chip group with have a label and category styling applied
childrenReact.ReactNodeContent rendered inside the chip group. Should be <Chip> elements.
classNamestringAdditional classes added to the chip item
closeBtnAriaLabelstring'Close chip group'Aria label for close button
collapsedTextstring'${remaining} more'Customizeable template string. Use variable "${remaining}" for the overflow chip count.
defaultIsOpenbooleanfalseFlag for having the chip group default to expanded
expandedTextstring'Show Less'Customizable "Show Less" text string
isClosablebooleanfalseFlag if chip group can be closed
numChipsnumber3Set number of chips to show before overflow
onClick(event: React.MouseEvent) => void(_e: React.MouseEvent) => undefined as anyFunction that is called when clicking on the chip group close button
onOverflowChipClick(event: React.MouseEvent) => void(_e: React.MouseEvent) => undefined as anyFunction that is called when clicking on the overflow (expand/collapse) chip button
tooltipPositionTooltipPosition | '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

.pf-c-chip-group--pf-global--Color--100
#151515
.pf-c-chip-group--pf-global--Color--200
#6a6e73
.pf-c-chip-group--pf-global--BorderColor--100
#d2d2d2
.pf-c-chip-group--pf-global--primary-color--100
#06c
.pf-c-chip-group--pf-global--link--Color
#06c
.pf-c-chip-group--pf-global--link--Color--hover
#004080
.pf-c-chip-group--pf-global--BackgroundColor--100
#fff
.pf-c-chip-group--pf-c-chip-group__list--MarginBottom
calc(0.25rem * -1)
.pf-c-chip-group--pf-c-chip-group__list--MarginRight
calc(0.25rem * -1)
.pf-c-chip-group--pf-c-chip-group--m-category--PaddingTop
0.25rem
.pf-c-chip-group--pf-c-chip-group--m-category--PaddingRight
0.25rem
.pf-c-chip-group--pf-c-chip-group--m-category--PaddingBottom
0.25rem
.pf-c-chip-group--pf-c-chip-group--m-category--PaddingLeft
0.5rem
.pf-c-chip-group--pf-c-chip-group--m-category--BorderRadius
3px
.pf-c-chip-group--pf-c-chip-group--m-category--BackgroundColor
#f0f0f0
.pf-c-chip-group--pf-c-chip-group__label--MarginRight
0.5rem
.pf-c-chip-group--pf-c-chip-group__label--FontSize
0.875rem
.pf-c-chip-group--pf-c-chip-group__label--MaxWidth
18ch
.pf-c-chip-group--pf-c-chip-group__close--MarginTop
calc(0.25rem * -1)
.pf-c-chip-group--pf-c-chip-group__close--MarginBottom
calc(0.25rem * -1)
.pf-c-chip-group--pf-c-chip-group__list-item--MarginRight
0.25rem
.pf-c-chip-group--pf-c-chip-group__list-item--MarginBottom
0.25rem

View source on GitHub