Examples
With removable categories
Category one
- Chip one
- Chip two
- Chip three
Category two has a very long name
- Chip one
- Chip two
- Chip three
Props
Chip
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the chip text | |
| className | string | '' | Additional classes added to the chip item |
| closeBtnAriaLabel | string | 'close' | Aria Label for close button |
| component | React.ReactNode | 'div' | 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 |
| 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 | (_e: React.MouseEvent) => undefined as any | Function that is called when clicking on the chip group close button |
| onOverflowChipClick | (event: React.MouseEvent) => void | (_e: React.MouseEvent) => undefined as any | Function that is called when clicking on the overflow (expand/collapse) chip button |
| 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
| .pf-c-chip-group | --pf-global--Color--100 | #151515 | |
| .pf-c-chip-group | --pf-global--Color--200 | #6a6e73 | |
| .pf-c-chip-group | --pf-global--BorderColor--100 | #d2d2d2 | |
| .pf-c-chip-group | --pf-global--primary-color--100 | #06c | |
| .pf-c-chip-group | --pf-global--link--Color | #06c | |
| .pf-c-chip-group | --pf-global--link--Color--hover | #004080 | |
| .pf-c-chip-group | --pf-global--BackgroundColor--100 | #fff | |
| .pf-c-chip-group | --pf-c-chip-group__list--MarginBottom | calc(0.25rem * -1) | |
| .pf-c-chip-group | --pf-c-chip-group__list--MarginRight | calc(0.25rem * -1) | |
| .pf-c-chip-group | --pf-c-chip-group--m-category--PaddingTop | 0.25rem | |
| .pf-c-chip-group | --pf-c-chip-group--m-category--PaddingRight | 0.25rem | |
| .pf-c-chip-group | --pf-c-chip-group--m-category--PaddingBottom | 0.25rem | |
| .pf-c-chip-group | --pf-c-chip-group--m-category--PaddingLeft | 0.5rem | |
| .pf-c-chip-group | --pf-c-chip-group--m-category--BorderRadius | 3px | |
| .pf-c-chip-group | --pf-c-chip-group--m-category--BackgroundColor | #f0f0f0 | |
| .pf-c-chip-group | --pf-c-chip-group__label--MarginRight | 0.5rem | |
| .pf-c-chip-group | --pf-c-chip-group__label--FontSize | 0.875rem | |
| .pf-c-chip-group | --pf-c-chip-group__label--MaxWidth | 18ch | |
| .pf-c-chip-group | --pf-c-chip-group__close--MarginTop | calc(0.25rem * -1) | |
| .pf-c-chip-group | --pf-c-chip-group__close--MarginBottom | calc(0.25rem * -1) | |
| .pf-c-chip-group | --pf-c-chip-group__list-item--MarginRight | 0.25rem | |
| .pf-c-chip-group | --pf-c-chip-group__list-item--MarginBottom | 0.25rem | |
View source on GitHub
