Warning alert:Deprecated feature
This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.
Examples
Chip variants
Chips can be removable or read-only. The Overflow chip is a special chip that is used to expand or collapse the content of a chip group.
Chip 1
Really long chip that goes on and on
Chip 7
Read-only chip
Really long chip that goes on and on
Chip 7
Read-only chip
Chip groups
A chip group is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When the value of numChips is exceeded, additional chips will be hidden using an overflow chip.
- Chip one
- Really long chip that goes on and on
- Chip three
Props
Chip
| Name | Type | Default | Description |
|---|---|---|---|
| badge | React.ReactNode | Badge to add to the chip. The badge will be rendered after the chip text. | |
| children | React.ReactNode | Content rendered inside the chip text | |
| className | string | '' | Additional classes added to the chip item |
| closeBtnAriaLabel | string | Aria Label for close button | |
| Deprecated: component | React.ReactNode | Component that will be used for chip. It is recommended that <button> or <li> are used when the chip is an overflow chip. | |
| isOverflowChip | boolean | false | Flag indicating if the chip is an overflow chip |
| isReadOnly | boolean | false | Flag indicating if chip is read only |
| onClick | (event: React.MouseEvent) => void | (_e: React.MouseEvent) => undefined as any | Function that is called when clicking on the chip close button |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| textMaxWidth | string | '16ch' | Css property expressed in percentage or any css unit that overrides the default value of the max-width of the chip's text |
| tooltipPosition | | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'top' | Position of the tooltip which is displayed if text is longer |
ChipGroup
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | 'Chip group category' | Aria label for chip group that does not have a category name |
| categoryName | string | '' | Category name text for the chip group category. If this prop is supplied the chip group with have a label and category styling applied |
| children | React.ReactNode | Content rendered inside the chip group. Should be <Chip> elements. | |
| className | string | Additional classes added to the chip item | |
| closeBtnAriaLabel | string | 'Close chip group' | Aria label for close button |
| collapsedText | string | '${remaining} more' | Customizeable template string. Use variable "${remaining}" for the overflow chip count. |
| defaultIsOpen | boolean | false | Flag for having the chip group default to expanded |
| expandedText | string | 'Show Less' | Customizable "Show Less" text string |
| isClosable | boolean | false | Flag if chip group can be closed |
| numChips | number | 3 | Set number of chips to show before overflow |
| onClick | (event: React.MouseEvent) => void | Function that is called when clicking on the chip group close button or on an overflow chip | |
| Deprecated: onOverflowChipClick | (event: React.MouseEvent) => void | Function that is called when clicking on the overflow (expand/collapse) chip button | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| tooltipPosition | | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'top' | Position of the tooltip which is displayed if the category name text is longer |
CSS variables
Prefixed with 'pf-v5-c-chip'
| Expand or collapse column | Selector | Variable | Value |
|---|
Prefixed with 'pf-v5-c-chip-group'
| Expand or collapse column | Selector | Variable | Value |
|---|
