HTML

Chip

ExamplesDocumentationAccessibilityUsageCSS Variables

Examples

Basic

Chip


Really long chip that goes on and on


Chip 7


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" layout.

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>, <li>Initiates the body of a chip. If used inside a .pf-c-chip-group use <li>.
.pf-c-chip__text*Initiates the text inside of the chip. Required.
.pf-c-button.pf-c-chip <button>Initiates the button used to remove the chip. Required.
.pf-c-badge<span>Initiates the badge inside the chip.
.pf-m-overflow.pf-c-chipApplies styling of the overflow chip.
.pf-c-button.pf-c-chip.pf-m-overflow <button>Initiates the button used to show the overflow toggle.
.pf-m-read-only.pf-c-chipModifies chip for read-only state.

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