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

Chip


Really long chip that goes on and on


Chip 00


Read-only chip




Draggable chip

Simple inline chip group with overflow

  • Chip one
  • Chip two
  • Chip three

Simple inline chip group expanded

  • Chip one
  • Chip two
  • Chip three
  • Chip four
  • Chip five

Chip group with categories

Category one
  • Chip one
  • Chip two
  • Chip three

Chip group with categories and overflow

Category one
  • Chip one
  • Chip two
  • Chip three

Chip group with categories and overflow expanded

Category one
  • Chip one
  • Chip two
  • Chip three
  • Chip four
  • Chip five

Chip group with removable categories

Category one
  • Chip one
  • Chip two
  • Chip three
  • Chip four
  • Chip five
  • Chip six

Documentation

Chip overview

A Chip is used to display items that have been filtered or selected from a larger group. They comprise of a text element and a button component that is used to remove the chip from selection. When the text overflows it is truncated using ellipses. A chip can be grouped by using the "chip-group" component.

Chip accessibility

Attribute
Applied to
Outcome
aria-label="[button label text]"
.pf-v5-c-button
Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text.
aria-labelledby="[id value of .pf-v5-c-button]"
.pf-v5-c-button
Gives the button an accessible name by referring to the element that provides the position of the button within a list. Required when the button is being removed.
aria-hidden="true"
<i>
Hides the icon from assistive technologies.

Chip usage

Class
Applied to
Outcome
.pf-v5-c-chip
<div>, <button>,
Initiates the chip component. Use a <button> with overflow chips Required
.pf-v5-c-chip__content
<span>
Creates a content wrapper for the chip. Required
.pf-v5-c-chip__text
<span>
Initiates the text inside the chip. Required
.pf-v5-c-chip__icon
<span>
Initiates the icon inside the chip.
.pf-v5-c-chip__actions
<span>
Creates a wrapper for chip actions. Required for removable chips
.pf-m-overflow
button.pf-v5-c-chip
Applies styling of the overflow chip.
.pf-m-draggable
.pf-v5-c-chip
Modifies the chip to be in the draggable state.

Chip group overview

A chip group is constrained to the width of its container and will wrap when it exceeds that width. An overflow value can be set and when the number of chips exceeds that value, additional chips will be hidden by default. The default overflow value will be set to 3 chips but this can be adjusted per application needs. The toggle button after the last chip allows the group to be expanded (or collapsed).

If you want to create sub-groupings of chips to represent multiple values applied against the same category, chips can be grouped by category. This can be useful in filtering use cases, for example, where you want all items that match more than one value of the same attribute, e.g., ‘status = down OR needs maintenance’.

The chip group requires the chip component. All single chip accessibility and usage requirements apply.

Chip group accessibility

Attributes for closable chip group button
Applied to
Outcome
role="list"
.pf-v5-c-chip-group__list
Indicates that the chip group list is a list element. This role is redundant since .pf-v5-c-chip-group__list is a <ul> but is required for screen readers to announce the list properly. Required
aria-label="[button label text]"
.pf-v5-c-chip-group__close > button
Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. Required
aria-labelledby="[id value of .pf-v5-c-chip-group__close > button] [id value of .pf-v5-c-chip-group__label]"
.pf-v5-c-chip-group__close > button
Provides an accessible name for the button. Required

Chip group usage

Class
Applied to
Outcome
.pf-v5-c-chip-group
<div>
Initiates the chip group component. Required.
.pf-v5-c-chip-group__list
<ul>
Initiates the container for a list of chips. Required.
.pf-v5-c-chip-group__list-item
<li>
Initiates the list item inside of the chip group. Required.
.pf-v5-c-chip-group__label
<span>
Initiates the label to be used in the chip group.
.pf-v5-c-chip-group__close
<div>
Initiates the container used for the button to remove the chip group.
.pf-v5-c-chip-group__main
<div>
Initiates the container for the label and list elements so that they wrap together. Required
.pf-v5-c-button
.pf-v5-c-chip-group__close <button>
Initiates the button used to remove the chip group.
.pf-m-category
.pf-v5-c-chip-group
Modifies the chip group to support category styling.

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