Skip to Content
Patternfly Logo

Chip

Chips are used to communicate a value, a tag, or a set of attribute-value pairs within workflows that involve filtering or tagging a set of objects. Related design guidelines: Filters

ExamplesDocumentationAccessibilityUsageCSS Variables

Examples

Basic

Chip


Really long chip that goes on and on


Chip 00


Read-only chip


Documentation

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.

Accessibility

AttributeApplied toOutcome
aria-label="[button label text]".pf-c-buttonProvides 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-c-button]".pf-c-buttonGives 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.

Usage

ClassApplied toOutcome
.pf-c-chip<div>, <button>,Initiates the chip component. Use a <button> with overflow chips Required
.pf-c-chip__text<span>Initiates the text inside of the chip. Required
.pf-c-button.pf-c-chip <button>Initiates the button used to remove the chip.
.pf-c-badge<span>Initiates the badge inside the chip.
.pf-m-overflowbutton.pf-c-chipApplies styling of the overflow chip.

CSS Variables

.pf-c-chip--pf-global--Color--100global_Color_100
#151515
.pf-c-chip--pf-global--Color--200global_Color_200
#6a6e73
.pf-c-chip--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
.pf-c-chip--pf-global--primary-color--100global_primary_color_100
#06c
.pf-c-chip--pf-global--link--Colorglobal_link_Color
#06c
.pf-c-chip--pf-global--link--Color--hoverglobal_link_Color_hover
#004080
.pf-c-chip--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
.pf-c-chip--pf-c-chip--PaddingTopc_chip_PaddingTop
0.25rem
.pf-c-chip--pf-c-chip--PaddingRightc_chip_PaddingRight
0.5rem
.pf-c-chip--pf-c-chip--PaddingBottomc_chip_PaddingBottom
0.25rem
.pf-c-chip--pf-c-chip--PaddingLeftc_chip_PaddingLeft
0.5rem
.pf-c-chip--pf-c-chip--BackgroundColorc_chip_BackgroundColor
#fff
.pf-c-chip--pf-c-chip--BorderRadiusc_chip_BorderRadius
3px
.pf-c-chip--pf-c-chip--before--BorderColorc_chip_before_BorderColor
#f0f0f0
.pf-c-chip--pf-c-chip--before--BorderWidthc_chip_before_BorderWidth
1px
.pf-c-chip--pf-c-chip--before--BorderRadiusc_chip_before_BorderRadius
3px
.pf-c-chip--pf-c-chip--m-overflow__text--Colorc_chip_m_overflow__text_Color
#06c
.pf-c-chip--pf-c-chip__text--FontSizec_chip__text_FontSize
0.75rem
.pf-c-chip--pf-c-chip__text--Colorc_chip__text_Color
#151515
.pf-c-chip--pf-c-chip__text--MaxWidthc_chip__text_MaxWidth
16ch
.pf-c-chip--pf-c-chip__c-button--PaddingTopc_chip__c_button_PaddingTop
0.25rem
.pf-c-chip--pf-c-chip__c-button--PaddingRightc_chip__c_button_PaddingRight
0.5rem
.pf-c-chip--pf-c-chip__c-button--PaddingBottomc_chip__c_button_PaddingBottom
0.25rem
.pf-c-chip--pf-c-chip__c-button--PaddingLeftc_chip__c_button_PaddingLeft
0.5rem
.pf-c-chip--pf-c-chip__c-button--MarginTopc_chip__c_button_MarginTop
calc(0.25rem * -1)
.pf-c-chip--pf-c-chip__c-button--MarginRightc_chip__c_button_MarginRight
calc(0.5rem / 2 * -1)
.pf-c-chip--pf-c-chip__c-button--MarginBottomc_chip__c_button_MarginBottom
calc(0.25rem * -1)
.pf-c-chip--pf-c-chip__c-button--FontSizec_chip__c_button_FontSize
0.75rem
.pf-c-chip--pf-c-chip__c-badge--MarginLeftc_chip__c_badge_MarginLeft
0.25rem
.pf-c-chip .pf-c-button--pf-c-button--PaddingTopc_button_PaddingTop
0.25rem
.pf-c-chip .pf-c-button--pf-c-button--PaddingRightc_button_PaddingRight
0.5rem
.pf-c-chip .pf-c-button--pf-c-button--PaddingBottomc_button_PaddingBottom
0.25rem
.pf-c-chip .pf-c-button--pf-c-button--PaddingLeftc_button_PaddingLeft
0.5rem
.pf-c-chip .pf-c-button--pf-c-button--FontSizec_button_FontSize
0.75rem