Patternfly Logo

Examples

Single

Chip 1


Really long Chip that goes on and on


Chip7


Read-only Chip


Simple inline chip group

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

Chip groups with categories

  • Chip one
  • Chip two
  • Chip three

Chip groups with categories removable

  • Chip one
  • Chip two
  • Chip three


  • Chip one
  • Chip two
  • Chip three

Props

Chip properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the chip text
classNamestringNo''Additional classes added to the chip item
closeBtnAriaLabelstringNo'close'Aria Label for close button
componentReact.ReactNodeNo'div'Component that will be used for chip. It is recommended that <button> or <li> are used when the chip is an overflow chip.
isOverflowChipbooleanNofalseFlag indicating if the chip is an overflow chip
isReadOnlybooleanNofalseFlag indicating if chip is read only
onClick(event: React.MouseEvent) => voidNo(_e: React.MouseEvent) => undefined as anyFunction that is called when clicking on the chip close button
tooltipPosition'auto' | 'top' | 'bottom' | 'left' | 'right'No'top'Position of the tooltip which is displayed if text is longer
ChipGroup properties
NameTypeRequiredDefaultDescription
aria-labelstringNo'Chip group category'Aria label for chip group that does not have a category name
categoryNamestringNo''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.ReactNodeNoContent rendered inside the chip group. Should be <Chip> elements.
classNamestringNoAdditional classes added to the chip item
closeBtnAriaLabelstringNo'Close chip group'Aria label for close button
collapsedTextstringNo'${remaining} more'Customizeable template string. Use variable "${remaining}" for the overflow chip count.
defaultIsOpenbooleanNofalseFlag for having the chip group default to expanded
expandedTextstringNo'Show Less'Customizable "Show Less" text string
isClosablebooleanNofalseFlag if chip group can be closed
numChipsnumberNo3Set number of chips to show before overflow
onClick(event: React.MouseEvent) => voidNo(_e: React.MouseEvent) => undefined as anyFunction that is called when clicking on the chip group 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-c-chip--pf-global--Color--200
#6a6e73
.pf-c-chip--pf-global--BorderColor--100
#d2d2d2
.pf-c-chip--pf-global--primary-color--100
#06c
.pf-c-chip--pf-global--link--Color
#06c
.pf-c-chip--pf-global--link--Color--hover
#004080
.pf-c-chip--pf-global--BackgroundColor--100
#fff
.pf-c-chip--pf-c-chip--PaddingTop
0.25rem
.pf-c-chip--pf-c-chip--PaddingRight
0.5rem
.pf-c-chip--pf-c-chip--PaddingBottom
0.25rem
.pf-c-chip--pf-c-chip--PaddingLeft
0.5rem
.pf-c-chip--pf-c-chip--BackgroundColor
#fff
.pf-c-chip--pf-c-chip--BorderRadius
3px
.pf-c-chip--pf-c-chip--before--BorderColor
#f0f0f0
.pf-c-chip--pf-c-chip--before--BorderWidth
1px
.pf-c-chip--pf-c-chip--before--BorderRadius
3px
.pf-c-chip--pf-c-chip--m-overflow__text--Color
#06c
.pf-c-chip--pf-c-chip--m-draggable--BackgroundColor
#f0f0f0
.pf-c-chip--pf-c-chip--m-draggable--BoxShadow
0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)
.pf-c-chip--pf-c-chip--m-draggable__icon--FontSize
0.625rem
.pf-c-chip--pf-c-chip__text--FontSize
0.75rem
.pf-c-chip--pf-c-chip__text--Color
#151515
.pf-c-chip--pf-c-chip__text--MaxWidth
16ch
.pf-c-chip--pf-c-chip__c-button--PaddingTop
0.25rem
.pf-c-chip--pf-c-chip__c-button--PaddingRight
0.5rem
.pf-c-chip--pf-c-chip__c-button--PaddingBottom
0.25rem
.pf-c-chip--pf-c-chip__c-button--PaddingLeft
0.5rem
.pf-c-chip--pf-c-chip__c-button--MarginTop
calc(0.25rem * -1)
.pf-c-chip--pf-c-chip__c-button--MarginRight
calc(0.5rem / 2 * -1)
.pf-c-chip--pf-c-chip__c-button--MarginBottom
calc(0.25rem * -1)
.pf-c-chip--pf-c-chip__c-button--FontSize
0.75rem
.pf-c-chip--pf-c-chip__c-badge--MarginLeft
0.25rem
.pf-c-chip--pf-c-chip__icon--MarginLeft
0.5rem
.pf-c-chip.pf-m-draggable--pf-c-chip--BackgroundColor
#f0f0f0
.pf-c-chip .pf-c-button--pf-c-button--PaddingTop
0.25rem
.pf-c-chip .pf-c-button--pf-c-button--PaddingRight
0.5rem
.pf-c-chip .pf-c-button--pf-c-button--PaddingBottom
0.25rem
.pf-c-chip .pf-c-button--pf-c-button--PaddingLeft
0.5rem
.pf-c-chip .pf-c-button--pf-c-button--FontSize
0.75rem

View source on GitHub