Skip to content
PatternFly logo

Chip

A chip is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.

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
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
textMaxWidthstringCss property expressed in percentage or any css unit that overrides the default value of the max-width of the chip's text
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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines