Skip to content
Patternfly Logo

Chip

Examples

Default

Chip 1


Really long chip that goes on and on


Chip7


Read-only chip


Props

Chip

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the chip text
classNamestring''Additional classes added to the chip item
closeBtnAriaLabelstring'close'Aria Label for close button
componentReact.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.
isOverflowChipbooleanfalseFlag indicating if the chip is an overflow chip
isReadOnlybooleanfalseFlag indicating if chip is read only
onClick(event: React.MouseEvent) => void(_e: React.MouseEvent) => undefined as anyFunction that is called when clicking on the chip close button
tooltipPositionTooltipPosition | '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

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