React

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

ExamplesPropsCSS Variables

Examples

Single

Chip 1


Really long Chip that goes on and on


Chip7


Read-only Chip

Toolbar

  • Category 1

    • Chip 1
    • Chip 2
  • Category 2

    • Chip 3
    • Chip 4
  • Category 3

    • Chip 5
    • Chip 6
    • Chip 7
    • Chip 8

Multi select

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

Badge

  • Lemons10
  • Limes8

Props

Chip properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeContent rendered inside the chip text
closeBtnAriaLabelstring'close'Aria Label for close button
classNamestring''Additional classes added to the chip item
isOverflowChipbooleanfalseFlag indicating if the chip has overflow
isReadOnlybooleanfalseFlag if chip is read only
onClick(event: React.MouseEvent) => void(_e: React.MouseEvent) => undefined as anyFunction that is called when clicking on the chip button
componentReact.ReactNode'div' as React.ReactNodeInternal flag for which component will be used for chip
tooltipPosition'auto' | 'top' | 'bottom' | 'left' | 'right''top' as 'auto' | 'top' | 'bottom' | 'left' | 'right'Position of the tooltip which is displayed if text is longer
ChipGroup properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeContent rendered inside the chip text
classNamestring''Additional classes added to the chip item
defaultIsOpenbooleanfalseFlag for having the chip group default to expanded
expandedTextstring'Show Less'Customizable "Show Less" text string
collapsedTextstring'${remaining} more'Customizeable template string. Use variable "${remaining}" for the overflow chip count.
withToolbarbooleanfalseFlag for grouping with a toolbar & category name
headingLevel'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'Set heading level to the chip item label
numChipsnumber3Set number of chips to show before overflow
ChipGroupToolbarItem properties
NameTypeRequiredDefaultDescription
categoryNamestring''Category name text
childrenReact.ReactNodenullContent rendered inside the chip text
classNamestring''Additional classes added to the chip item

CSS Variables

--pf-c-chip__text--Colorc_chip__text_Color
#151515
--pf-c-chip__text--FontSizec_chip__text_FontSize
0.75rem
--pf-c-chip__text--MaxWidthc_chip__text_MaxWidth
7.5rem
--pf-c-chip--BackgroundColorc_chip_BackgroundColor
#ededed
--pf-c-chip--BorderColorc_chip_BorderColor
#737679
--pf-c-chip--BorderRadiusc_chip_BorderRadius
3px
--pf-c-chip--BorderWidthc_chip_BorderWidth
0
--pf-c-chip--c-badge--MarginLeftc_chip_c_badge_MarginLeft
0.25rem
--pf-c-chip--c-button--FontSizec_chip_c_button_FontSize
0.75rem
--pf-c-chip--c-button--PaddingLeftc_chip_c_button_PaddingLeft
0.5rem
--pf-c-chip--c-button--PaddingRightc_chip_c_button_PaddingRight
0.5rem
--pf-c-chip-group__label--FontSizec_chip_group__label_FontSize
0.875rem
--pf-c-chip-group__label--Maxwidthc_chip_group__label_Maxwidth
7.5rem
--pf-c-chip-group__label--PaddingBottomc_chip_group__label_PaddingBottom
0.25rem
--pf-c-chip-group__label--PaddingLeftc_chip_group__label_PaddingLeft
0
--pf-c-chip-group__label--PaddingRightc_chip_group__label_PaddingRight
0.5rem
--pf-c-chip-group__label--PaddingTopc_chip_group__label_PaddingTop
0.25rem
--pf-c-chip-group__li--m-toolbar--MarginRightc_chip_group__li_m_toolbar_MarginRight
0.5rem
--pf-c-chip-group--c-chip--MarginBottomc_chip_group_c_chip_MarginBottom
0.25rem
--pf-c-chip-group--c-chip--MarginRightc_chip_group_c_chip_MarginRight
0
--pf-c-chip-group--m-toolbar--BackgroundColorc_chip_group_m_toolbar_BackgroundColor
#ededed
--pf-c-chip-group--m-toolbar-BorderRadiusc_chip_group_m_toolbar_BorderRadius
3px
--pf-c-chip-group--m-toolbar-PaddingBottomc_chip_group_m_toolbar_PaddingBottom
0.25rem
--pf-c-chip-group--m-toolbar-PaddingLeftc_chip_group_m_toolbar_PaddingLeft
0.5rem
--pf-c-chip-group--m-toolbar-PaddingRightc_chip_group_m_toolbar_PaddingRight
0.25rem
--pf-c-chip-group--m-toolbar-PaddingTopc_chip_group_m_toolbar_PaddingTop
0.25rem
--pf-c-chip-group--MarginBottomc_chip_group_MarginBottom
calc(0.25rem*-1)
--pf-c-chip-group--MarginRightc_chip_group_MarginRight
0.25rem
--pf-c-chip--m-overflow--BackgroundColorc_chip_m_overflow_BackgroundColor
#ededed
--pf-c-chip--m-overflow--BorderWidthc_chip_m_overflow_BorderWidth
0
--pf-c-chip--m-overflow--c-button--active--BorderColorc_chip_m_overflow_c_button_active_BorderColor
#737679
--pf-c-chip--m-overflow--c-button--active--BorderWidthc_chip_m_overflow_c_button_active_BorderWidth
1px
--pf-c-chip--m-overflow--c-button--BorderColorc_chip_m_overflow_c_button_BorderColor
#737679
--pf-c-chip--m-overflow--c-button--BorderRadiusc_chip_m_overflow_c_button_BorderRadius
3px
--pf-c-chip--m-overflow--c-button--BorderWidthc_chip_m_overflow_c_button_BorderWidth
1px
--pf-c-chip--m-overflow--c-button--focus--BorderColorc_chip_m_overflow_c_button_focus_BorderColor
#737679
--pf-c-chip--m-overflow--c-button--focus--BorderWidthc_chip_m_overflow_c_button_focus_BorderWidth
1px
--pf-c-chip--m-overflow--c-button--hover--BorderColorc_chip_m_overflow_c_button_hover_BorderColor
#737679
--pf-c-chip--m-overflow--c-button--hover--BorderWidthc_chip_m_overflow_c_button_hover_BorderWidth
1px
--pf-c-chip--m-overflow--c-button--PaddingLeftc_chip_m_overflow_c_button_PaddingLeft
0.5rem
--pf-c-chip--m-overflow--c-button--PaddingRightc_chip_m_overflow_c_button_PaddingRight
0.5rem
--pf-c-chip--m-overflow--PaddingLeftc_chip_m_overflow_PaddingLeft
0
--pf-c-chip--m-read-only--PaddingBottomc_chip_m_read_only_PaddingBottom
0.375rem
--pf-c-chip--m-read-only--PaddingRightc_chip_m_read_only_PaddingRight
0.5rem
--pf-c-chip--m-read-only--PaddingTopc_chip_m_read_only_PaddingTop
0.375rem
--pf-c-chip--PaddingLeftc_chip_PaddingLeft
0