Examples
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
