Warning alert:Deprecated feature
This component implementation has been deprecated in favor of a newer solution, and is no longer being maintained or enhanced. To learn more about deprecated components, visit about PatternFly.
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 label. | |
| className | string | '' | Additional classes added to the label. |
| closeBtn | React.ReactNode | Node for custom close button. | |
| closeBtnAriaLabel | string | Aria label for close button | |
| closeBtnProps | any | Additional properties for the default close button. | |
| color | 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow' | Color of the label. | |
| 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. | |
| editableProps | any | Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. | |
| href | string | Href for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in. | |
| icon | React.ReactNode | Icon added to the left of the label text. Overrides the icon set by the status property. | |
| isClickable | boolean | Flag indicating the label is clickable. This flag will automatically be set if a href is passed, or if an onClick handler is passed and the label is not an overflow or add variant. This should be manually set when using the render prop. | |
| isCompact | boolean | Flag indicating the label is compact. | |
| isDisabled | boolean | Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in. | |
| isEditable | boolean | Flag indicating the label is editable. | |
| 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 | Callback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in. |
| onClose | (event: React.MouseEvent) => void | Close click callback for removable labels. If present, label will have a close button. | |
| onEditCancel | (event: KeyboardEvent, previousText: string) => void | Callback when an editable label cancels an edit. | |
| onEditComplete | (event: MouseEvent | KeyboardEvent, newText: string) => void | Callback when an editable label completes an edit. | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | ||
| render | ({ className, content, componentRef }: { className: string; content: React.ReactNode; componentRef: any; }) => React.ReactNode | Forwards the label content and className to rendered function. Use this prop for react router support. | |
| status | 'success' | 'warning' | 'danger' | 'info' | 'custom' | Status of the label with a respective icon and color. Overrides the color set by the color property. | |
| textMaxWidth | string | '16ch' | The max width of the label before it is truncated. Can be any valid CSS unit, such as '100%', '100px', or '16ch'. |
| 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 truncated |
| variant | 'outline' | 'filled' | 'overflow' | 'add' | Variant of the label. |
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' | Customizable 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. | |
| ouiaSafe | boolean | ||
| 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-v6-c-chip'
| Expand or collapse column | Selector | Variable | Value |
|---|
Prefixed with 'pf-v6-c-chip-group'
| Expand or collapse column | Selector | Variable | Value |
|---|
