HTML

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

ExamplesDocumentationCSS Variables

Examples

Chip

Chip


Really long Chip that goes on and on


Chip 7


Read-only Chip


Copied to clipboard

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

Attribute Applied To Outcome
aria-label="[button label text]" .pf-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-c-button]" .pf-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.

Usage

Class Applied To Outcome
.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-chip Applies 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-chip Modifies chip for read-only state.

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