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 VariablesExamples
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>, <button>, <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 | button.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. |
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.375rem | ||
| .pf-c-chip | --pf-c-chip--PaddingRight | 0.5rem | ||
| .pf-c-chip | --pf-c-chip--PaddingBottom | 0.375rem | ||
| .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__text--FontSize | 0.75rem | ||
| .pf-c-chip | --pf-c-chip__text--Color | #151515 | ||
| .pf-c-chip | --pf-c-chip__text--MaxWidth | 7.5rem | ||
| .pf-c-chip | --pf-c-chip__c-button--PaddingLeft | 0.5rem | ||
| .pf-c-chip | --pf-c-chip__c-button--PaddingRight | 0.5rem | ||
| .pf-c-chip | --pf-c-chip__c-button--MarginTop | calc(0.375rem * -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.375rem * -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-button | --pf-c-button--PaddingRight | 0.5rem | ||
| .pf-c-chip .pf-c-button | --pf-c-button--PaddingLeft | 0.5rem | ||
| .pf-c-chip .pf-c-button | --pf-c-button--FontSize | 0.75rem | ||
