Skip to content
PatternFly

Chip

A chip is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.

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


Chip7


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

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

Chip groups 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
badgeReact.ReactNodeBadge to add to the chip. The badge will be rendered after the chip text.
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
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
textMaxWidthstringCss 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
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
ouiaIdnumber | stringValue 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-v5-c-chip'

Expand or collapse columnSelectorVariableValue
.pf-v5-c-chip--pf-v5-global--Color--100
#151515
.pf-v5-c-chip--pf-v5-global--Color--200
#6a6e73
.pf-v5-c-chip--pf-v5-global--BorderColor--100
#d2d2d2
.pf-v5-c-chip--pf-v5-global--primary-color--100
#06c
.pf-v5-c-chip--pf-v5-global--link--Color
#06c
.pf-v5-c-chip--pf-v5-global--link--Color--hover
#004080
.pf-v5-c-chip--pf-v5-global--BackgroundColor--100
#fff
.pf-v5-c-chip--pf-v5-global--icon--Color--light
#6a6e73
.pf-v5-c-chip--pf-v5-global--icon--Color--dark
#151515
.pf-v5-c-chip--pf-v5-c-chip--PaddingTop
0.25rem
.pf-v5-c-chip--pf-v5-c-chip--PaddingRight
0.5rem
.pf-v5-c-chip--pf-v5-c-chip--PaddingBottom
0.25rem
.pf-v5-c-chip--pf-v5-c-chip--PaddingLeft
0.5rem
.pf-v5-c-chip--pf-v5-c-chip--BackgroundColor
#fff
.pf-v5-c-chip--pf-v5-c-chip--BorderRadius
3px
.pf-v5-c-chip--pf-v5-c-chip--before--BorderColor
#f0f0f0
.pf-v5-c-chip--pf-v5-c-chip--before--BorderWidth
1px
.pf-v5-c-chip--pf-v5-c-chip--before--BorderRadius
3px
.pf-v5-c-chip--pf-v5-c-chip--m-overflow__text--Color
#06c
.pf-v5-c-chip--pf-v5-c-chip--m-draggable--BackgroundColor
#f0f0f0
.pf-v5-c-chip--pf-v5-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-v5-c-chip--pf-v5-c-chip--m-draggable__icon--FontSize
0.75rem
.pf-v5-c-chip--pf-v5-c-chip__content--FontSize
0.75rem
.pf-v5-c-chip--pf-v5-c-chip__content--ColumnGap
0.25rem
.pf-v5-c-chip--pf-v5-c-chip__text--Color
#151515
.pf-v5-c-chip--pf-v5-c-chip__text--MaxWidth
16ch
.pf-v5-c-chip--pf-v5-c-chip__c-badge--MarginLeft
0.25rem
.pf-v5-c-chip--pf-v5-c-chip__actions--FontSize
0.75rem
.pf-v5-c-chip--pf-v5-c-chip__actions--c-button--PaddingTop
0.25rem
.pf-v5-c-chip--pf-v5-c-chip__actions--c-button--PaddingRight
0.5rem
.pf-v5-c-chip--pf-v5-c-chip__actions--c-button--PaddingBottom
0.25rem
.pf-v5-c-chip--pf-v5-c-chip__actions--c-button--PaddingLeft
0.5rem
.pf-v5-c-chip--pf-v5-c-chip__actions--c-button--MarginTop
calc(0.25rem * -1)
.pf-v5-c-chip--pf-v5-c-chip__actions--c-button--MarginRight
calc(0.5rem / 2 * -1)
.pf-v5-c-chip--pf-v5-c-chip__actions--c-button--MarginBottom
calc(0.25rem * -1)
.pf-v5-c-chip--pf-v5-c-chip__actions--c-button--FontSize
0.75rem
.pf-v5-c-chip--pf-v5-c-chip__icon--MarginLeft
0.5rem
.pf-v5-c-chip.pf-m-draggable--pf-v5-c-chip--BackgroundColor
#f0f0f0
.pf-v5-c-chip__actions .pf-v5-c-button--pf-v5-c-button--PaddingTop
0.25rem
.pf-v5-c-chip__actions .pf-v5-c-button--pf-v5-c-button--PaddingRight
0.5rem
.pf-v5-c-chip__actions .pf-v5-c-button--pf-v5-c-button--PaddingBottom
0.25rem
.pf-v5-c-chip__actions .pf-v5-c-button--pf-v5-c-button--PaddingLeft
0.5rem
.pf-v5-c-chip__actions .pf-v5-c-button--pf-v5-c-button--FontSize
0.75rem

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

Expand or collapse columnSelectorVariableValue
.pf-v5-c-chip-group--pf-v5-global--Color--100
#151515
.pf-v5-c-chip-group--pf-v5-global--Color--200
#6a6e73
.pf-v5-c-chip-group--pf-v5-global--BorderColor--100
#d2d2d2
.pf-v5-c-chip-group--pf-v5-global--primary-color--100
#06c
.pf-v5-c-chip-group--pf-v5-global--link--Color
#06c
.pf-v5-c-chip-group--pf-v5-global--link--Color--hover
#004080
.pf-v5-c-chip-group--pf-v5-global--BackgroundColor--100
#fff
.pf-v5-c-chip-group--pf-v5-global--icon--Color--light
#6a6e73
.pf-v5-c-chip-group--pf-v5-global--icon--Color--dark
#151515
.pf-v5-c-chip-group--pf-v5-c-chip-group--PaddingTop
0
.pf-v5-c-chip-group--pf-v5-c-chip-group--PaddingRight
0
.pf-v5-c-chip-group--pf-v5-c-chip-group--PaddingBottom
0
.pf-v5-c-chip-group--pf-v5-c-chip-group--PaddingLeft
0
.pf-v5-c-chip-group--pf-v5-c-chip-group--RowGap
0.5rem
.pf-v5-c-chip-group--pf-v5-c-chip-group--ColumnGap
0
.pf-v5-c-chip-group--pf-v5-c-chip-group__main--RowGap
0.25rem
.pf-v5-c-chip-group--pf-v5-c-chip-group__main--ColumnGap
0.5rem
.pf-v5-c-chip-group--pf-v5-c-chip-group__list--RowGap
0.25rem
.pf-v5-c-chip-group--pf-v5-c-chip-group__list--ColumnGap
0.25rem
.pf-v5-c-chip-group--pf-v5-c-chip-group--m-category--PaddingTop
0.25rem
.pf-v5-c-chip-group--pf-v5-c-chip-group--m-category--PaddingRight
0.25rem
.pf-v5-c-chip-group--pf-v5-c-chip-group--m-category--PaddingBottom
0.25rem
.pf-v5-c-chip-group--pf-v5-c-chip-group--m-category--PaddingLeft
0.5rem
.pf-v5-c-chip-group--pf-v5-c-chip-group--m-category--BorderRadius
3px
.pf-v5-c-chip-group--pf-v5-c-chip-group--m-category--BackgroundColor
#f0f0f0
.pf-v5-c-chip-group--pf-v5-c-chip-group__label--FontSize
0.875rem
.pf-v5-c-chip-group--pf-v5-c-chip-group__label--MaxWidth
18ch
.pf-v5-c-chip-group--pf-v5-c-chip-group__close--MarginTop
calc(0.25rem * -1)
.pf-v5-c-chip-group--pf-v5-c-chip-group__close--MarginBottom
calc(0.25rem * -1)
.pf-v5-c-chip-group.pf-m-category--pf-v5-c-chip-group--PaddingTop
0.25rem
.pf-v5-c-chip-group.pf-m-category--pf-v5-c-chip-group--PaddingRight
0.25rem
.pf-v5-c-chip-group.pf-m-category--pf-v5-c-chip-group--PaddingBottom
0.25rem
.pf-v5-c-chip-group.pf-m-category--pf-v5-c-chip-group--PaddingLeft
0.5rem

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines