Patternfly Logo

Examples

Basic

Chip


Really long chip that goes on and on


Chip 00


Read-only chip




Draggable 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

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>, <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-chip__icon
<span>
Initiates the icon inside of the chip.
.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-overflow
button.pf-c-chip
Applies styling of the overflow chip.
.pf-m-draggable
.pf-c-chip
Modifies the chip to be in the draggable state.

CSS variables

.pf-c-chip--pf-global--Color--100
#151515
.pf-c-chip--pf-global--Color--200
#6a6e73
.pf-c-chip--pf-global--BorderColor--100
#d2d2d2
.pf-c-chip--pf-global--primary-color--100
#06c
.pf-c-chip--pf-global--link--Color
#06c
.pf-c-chip--pf-global--link--Color--hover
#004080
.pf-c-chip--pf-global--BackgroundColor--100
#fff
.pf-c-chip--pf-c-chip--PaddingTop
0.25rem
.pf-c-chip--pf-c-chip--PaddingRight
0.5rem
.pf-c-chip--pf-c-chip--PaddingBottom
0.25rem
.pf-c-chip--pf-c-chip--PaddingLeft
0.5rem
.pf-c-chip--pf-c-chip--BackgroundColor
#fff
.pf-c-chip--pf-c-chip--BorderRadius
3px
.pf-c-chip--pf-c-chip--before--BorderColor
#f0f0f0
.pf-c-chip--pf-c-chip--before--BorderWidth
1px
.pf-c-chip--pf-c-chip--before--BorderRadius
3px
.pf-c-chip--pf-c-chip--m-overflow__text--Color
#06c
.pf-c-chip--pf-c-chip--m-draggable--BackgroundColor
#f0f0f0
.pf-c-chip--pf-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-c-chip--pf-c-chip--m-draggable__icon--FontSize
0.625rem
.pf-c-chip--pf-c-chip__text--FontSize
0.75rem
.pf-c-chip--pf-c-chip__text--Color
#151515
.pf-c-chip--pf-c-chip__text--MaxWidth
16ch
.pf-c-chip--pf-c-chip__c-button--PaddingTop
0.25rem
.pf-c-chip--pf-c-chip__c-button--PaddingRight
0.5rem
.pf-c-chip--pf-c-chip__c-button--PaddingBottom
0.25rem
.pf-c-chip--pf-c-chip__c-button--PaddingLeft
0.5rem
.pf-c-chip--pf-c-chip__c-button--MarginTop
calc(0.25rem * -1)
.pf-c-chip--pf-c-chip__c-button--MarginRight
calc(0.5rem / 2 * -1)
.pf-c-chip--pf-c-chip__c-button--MarginBottom
calc(0.25rem * -1)
.pf-c-chip--pf-c-chip__c-button--FontSize
0.75rem
.pf-c-chip--pf-c-chip__c-badge--MarginLeft
0.25rem
.pf-c-chip--pf-c-chip__icon--MarginLeft
0.5rem
.pf-c-chip.pf-m-draggable--pf-c-chip--BackgroundColor
#f0f0f0
.pf-c-chip .pf-c-button--pf-c-button--PaddingTop
0.25rem
.pf-c-chip .pf-c-button--pf-c-button--PaddingRight
0.5rem
.pf-c-chip .pf-c-button--pf-c-button--PaddingBottom
0.25rem
.pf-c-chip .pf-c-button--pf-c-button--PaddingLeft
0.5rem
.pf-c-chip .pf-c-button--pf-c-button--FontSize
0.75rem

View source on GitHub