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

Chip

Chip 1


Really long Chip that goes on and on


Chip7


Read-only Chip
Copied to clipboard

Chip group toolbar

  • Category 1

    • Chip 1
    • Chip 2
Copied to clipboard

Chip group multi-select

  • Chip 1
Copied to clipboard

Badge chip group

  • Lemons10
Copied to clipboard

Props

Chip Props

The Chip component accepts the following props.

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() => undefined as anyFunction that is called when clicking on the chip button
componentReact.ReactNode'div'Internal flag for which component will be used for chip
tooltipPosition'top' | 'bottom' | 'left' | 'right''top'Position of the tooltip which is displayed if text is longer

ChipGroup Props

The ChipGroup component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeContent rendered inside the chip text
classNamestring''Additional classes added to the chip item
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

ChipGroupToolbarItem Props

The ChipGroupToolbarItem component accepts the following props.

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--BackgroundColorc_chip_BackgroundColor#ededed
--pf-c-chip--BorderColorc_chip_BorderColor#72767b
--pf-c-chip--BorderRadiusc_chip_BorderRadius3px
--pf-c-chip--BorderWidthc_chip_BorderWidth0
--pf-c-chip--PaddingLeftc_chip_PaddingLeft0
--pf-c-chip__text--Colorc_chip__text_Color#151515
--pf-c-chip__text--FontSizec_chip__text_FontSize0.75rem
--pf-c-chip__text--MaxWidthc_chip__text_MaxWidth7.5rem
--pf-c-chip--c-badge--MarginLeftc_chip_c_badge_MarginLeft0.25rem
--pf-c-chip--c-button--FontSizec_chip_c_button_FontSize0.75rem
--pf-c-chip--c-button--PaddingLeftc_chip_c_button_PaddingLeft0.5rem
--pf-c-chip--c-button--PaddingRightc_chip_c_button_PaddingRight0.5rem
--pf-c-chip--m-overflow--BackgroundColorc_chip_m_overflow_BackgroundColor#ededed
--pf-c-chip--m-overflow--BorderWidthc_chip_m_overflow_BorderWidth0
--pf-c-chip--m-overflow--PaddingLeftc_chip_m_overflow_PaddingLeft0
--pf-c-chip--m-overflow--c-button--BorderColorc_chip_m_overflow_c_button_BorderColor#72767b
--pf-c-chip--m-overflow--c-button--BorderRadiusc_chip_m_overflow_c_button_BorderRadius3px
--pf-c-chip--m-overflow--c-button--BorderWidthc_chip_m_overflow_c_button_BorderWidth1px
--pf-c-chip--m-overflow--c-button--PaddingLeftc_chip_m_overflow_c_button_PaddingLeft0.5rem
--pf-c-chip--m-overflow--c-button--PaddingRightc_chip_m_overflow_c_button_PaddingRight0.5rem
--pf-c-chip--m-overflow--c-button--active--BorderColorc_chip_m_overflow_c_button_active_BorderColor#72767b
--pf-c-chip--m-overflow--c-button--active--BorderWidthc_chip_m_overflow_c_button_active_BorderWidth1px
--pf-c-chip--m-overflow--c-button--focus--BorderColorc_chip_m_overflow_c_button_focus_BorderColor#72767b
--pf-c-chip--m-overflow--c-button--focus--BorderWidthc_chip_m_overflow_c_button_focus_BorderWidth1px
--pf-c-chip--m-overflow--c-button--hover--BorderColorc_chip_m_overflow_c_button_hover_BorderColor#72767b
--pf-c-chip--m-overflow--c-button--hover--BorderWidthc_chip_m_overflow_c_button_hover_BorderWidth1px
--pf-c-chip--m-read-only--PaddingBottomc_chip_m_read_only_PaddingBottom0.375rem
--pf-c-chip--m-read-only--PaddingRightc_chip_m_read_only_PaddingRight0.5rem
--pf-c-chip--m-read-only--PaddingTopc_chip_m_read_only_PaddingTop0.375rem