Examples
Filled
GreyGrey icon Grey removeable Grey icon removeable Grey link Grey link removeableGrey label with icon that overflows
Blue Blue icon Blue removeable Blue icon removeable Blue link Blue link removeableBlue label with icon that overflows
Green Green icon Green removeable Green icon removeable Green link Green link removeableGreen label with icon that overflows
Orange Orange icon Orange removeable Orange icon removeable Orange link Orange link removeableOrange label with icon that overflows
Red Red icon Red removeable Red icon removeable Red link Red link removeableRed label with icon that overflows
Purple Purple icon Purple removeable Purple icon removeable Purple link Purple link removeablePurple label with icon that overflows
Cyan Cyan icon Cyan removeable Cyan icon removeable Cyan link Cyan link removeableCyan label with icon that overflows
Blue Blue icon Blue removeable Blue icon removeable Blue link Blue link removeableBlue label with icon that overflows
Green Green icon Green removeable Green icon removeable Green link Green link removeableGreen label with icon that overflows
Orange Orange icon Orange removeable Orange icon removeable Orange link Orange link removeableOrange label with icon that overflows
Red Red icon Red removeable Red icon removeable Red link Red link removeableRed label with icon that overflows
Purple Purple icon Purple removeable Purple icon removeable Purple link Purple link removeablePurple label with icon that overflows
Cyan Cyan icon Cyan removeable Cyan icon removeable Cyan link Cyan link removeableCyan label with icon that overflows
Outline
Grey Grey icon Grey removeable Grey icon removeable Grey link Grey link removeableGrey label with icon that overflows
Blue Blue icon Blue removeable Blue icon removeable Blue link Blue link removeableBlue label with icon that overflows
Green Green icon Green removeable Green icon removeable Green link Green link removeableGreen label with icon that overflows
Orange Orange icon Orange removeable Orange icon removeable Orange link Orange link removeableOrange label with icon that overflows
Red Red icon Red removeable Red icon removeable Red link Red link removeableRed label with icon that overflows
Purple Purple icon Purple removeable Purple icon removeable Purple link Purple link removeablePurple label with icon that overflows
Cyan Cyan icon Cyan removeable Cyan icon removeable Cyan link Cyan link removeableCyan label with icon that overflows
Blue Blue icon Blue removeable Blue icon removeable Blue link Blue link removeableBlue label with icon that overflows
Green Green icon Green removeable Green icon removeable Green link Green link removeableGreen label with icon that overflows
Orange Orange icon Orange removeable Orange icon removeable Orange link Orange link removeableOrange label with icon that overflows
Red Red icon Red removeable Red icon removeable Red link Red link removeableRed label with icon that overflows
Purple Purple icon Purple removeable Purple icon removeable Purple link Purple link removeablePurple label with icon that overflows
Cyan Cyan icon Cyan removeable Cyan icon removeable Cyan link Cyan link removeableCyan label with icon that overflows
Props
Label
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | Content rendered inside the label. | |
className | string | No | '' | Additional classes added to the label. |
closeBtn | React.ReactNode | No | Node for custom close button. | |
closeBtnProps | any | No | Additional properties for the default close button. | |
color | 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | No | 'grey' | Color of the label. |
href | string | No | Href for a label that is a link. If present, the label will change to an anchor element. | |
icon | React.ReactNode | No | Icon added to the left of the label text. | |
isOverflowLabel | boolean | No | Flag indicating if the label is an overflow label | |
isTruncated | boolean | No | false | Flag indicating the label text should be truncated. |
onClose | (event: React.MouseEvent) => void | No | Close click callback for removable labels. If present, label will have a close button. | |
render | ({ className, content, componentRef }: { className: string; content: React.ReactNode; componentRef: any; }) => React.ReactNode | No | Forwards the label content and className to rendered function. Use this prop for react router support. | |
tooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | No | Position of the tooltip which is displayed if text is truncated | |
variant | 'outline' | 'filled' | No | 'filled' | Variant of the label. |
CSS variables
.pf-c-label | --pf-c-label--PaddingTop | 0.25rem | |
.pf-c-label | --pf-c-label--PaddingRight | 0.5rem | |
.pf-c-label | --pf-c-label--PaddingBottom | 0.25rem | |
.pf-c-label | --pf-c-label--PaddingLeft | 0.5rem | |
.pf-c-label | --pf-c-label--BorderRadius | 30em | |
.pf-c-label | --pf-c-label--BackgroundColor | #f5f5f5 | |
.pf-c-label | --pf-c-label--Color | #151515 | |
.pf-c-label | --pf-c-label--FontSize | 0.875rem | |
.pf-c-label | --pf-c-label__content--before--BorderWidth | 1px | |
.pf-c-label | --pf-c-label__content--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--BackgroundColor | #fff | |
.pf-c-label | --pf-c-label--m-outline__content--before--BorderWidth | 1px | |
.pf-c-label | --pf-c-label--m-outline__content--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label__content--link--hover--before--BorderWidth | 2px | |
.pf-c-label | --pf-c-label__content--link--focus--before--BorderWidth | 2px | |
.pf-c-label | --pf-c-label__content--link--hover--before--BorderColor | #8a8d90 | |
.pf-c-label | --pf-c-label__content--link--focus--before--BorderColor | #8a8d90 | |
.pf-c-label | --pf-c-label--m-outline__content--link--hover--before--BorderWidth | 2px | |
.pf-c-label | --pf-c-label--m-outline__content--link--focus--before--BorderWidth | 2px | |
.pf-c-label | --pf-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-blue--BackgroundColor | #e7f1fa | |
.pf-c-label | --pf-c-label--m-blue__icon--Color | #06c | |
.pf-c-label | --pf-c-label--m-blue__content--Color | #002952 | |
.pf-c-label | --pf-c-label--m-blue__content--before--BorderColor | #bee1f4 | |
.pf-c-label | --pf-c-label--m-blue__content--link--hover--before--BorderColor | #06c | |
.pf-c-label | --pf-c-label--m-blue__content--link--focus--before--BorderColor | #06c | |
.pf-c-label | --pf-c-label--m-outline--m-blue__content--Color | #06c | |
.pf-c-label | --pf-c-label--m-outline--m-blue__content--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-green--BackgroundColor | #f3faf2 | |
.pf-c-label | --pf-c-label--m-green__icon--Color | #3e8635 | |
.pf-c-label | --pf-c-label--m-green__content--Color | #1e4f18 | |
.pf-c-label | --pf-c-label--m-green__content--before--BorderColor | #bde5b8 | |
.pf-c-label | --pf-c-label--m-green__content--link--hover--before--BorderColor | #3e8635 | |
.pf-c-label | --pf-c-label--m-green__content--link--focus--before--BorderColor | #3e8635 | |
.pf-c-label | --pf-c-label--m-outline--m-green__content--Color | #3e8635 | |
.pf-c-label | --pf-c-label--m-outline--m-green__content--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-orange--BackgroundColor | #fdf7e7 | |
.pf-c-label | --pf-c-label--m-orange__icon--Color | #ec7a08 | |
.pf-c-label | --pf-c-label--m-orange__content--Color | #3d2c00 | |
.pf-c-label | --pf-c-label--m-orange__content--before--BorderColor | #f4b678 | |
.pf-c-label | --pf-c-label--m-orange__content--link--hover--before--BorderColor | #ec7a08 | |
.pf-c-label | --pf-c-label--m-orange__content--link--focus--before--BorderColor | #ec7a08 | |
.pf-c-label | --pf-c-label--m-outline--m-orange__content--Color | #8f4700 | |
.pf-c-label | --pf-c-label--m-outline--m-orange__content--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-red--BackgroundColor | #faeae8 | |
.pf-c-label | --pf-c-label--m-red__icon--Color | #c9190b | |
.pf-c-label | --pf-c-label--m-red__content--Color | #7d1007 | |
.pf-c-label | --pf-c-label--m-red__content--before--BorderColor | #c9190b | |
.pf-c-label | --pf-c-label--m-red__content--link--hover--before--BorderColor | #c9190b | |
.pf-c-label | --pf-c-label--m-red__content--link--focus--before--BorderColor | #c9190b | |
.pf-c-label | --pf-c-label--m-outline--m-red__content--Color | #c9190b | |
.pf-c-label | --pf-c-label--m-outline--m-red__content--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-purple--BackgroundColor | #f2f0fc | |
.pf-c-label | --pf-c-label--m-purple__icon--Color | #6753ac | |
.pf-c-label | --pf-c-label--m-purple__content--Color | #1f0066 | |
.pf-c-label | --pf-c-label--m-purple__content--before--BorderColor | #cbc1ff | |
.pf-c-label | --pf-c-label--m-purple__content--link--hover--before--BorderColor | #6753ac | |
.pf-c-label | --pf-c-label--m-purple__content--link--focus--before--BorderColor | #6753ac | |
.pf-c-label | --pf-c-label--m-outline--m-purple__content--Color | #6753ac | |
.pf-c-label | --pf-c-label--m-outline--m-purple__content--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-cyan--BackgroundColor | #f2f9f9 | |
.pf-c-label | --pf-c-label--m-cyan__icon--Color | #009596 | |
.pf-c-label | --pf-c-label--m-cyan__content--Color | #003737 | |
.pf-c-label | --pf-c-label--m-cyan__content--before--BorderColor | #a2d9d9 | |
.pf-c-label | --pf-c-label--m-cyan__content--link--hover--before--BorderColor | #009596 | |
.pf-c-label | --pf-c-label--m-cyan__content--link--focus--before--BorderColor | #009596 | |
.pf-c-label | --pf-c-label--m-outline--m-cyan__content--Color | #005f60 | |
.pf-c-label | --pf-c-label--m-outline--m-cyan__content--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label | --pf-c-label--m-overflow__content--Color | #06c | |
.pf-c-label | --pf-c-label--m-overflow__content--BackgroundColor | #fff | |
.pf-c-label | --pf-c-label--m-overflow__content--before--BorderWidth | 1px | |
.pf-c-label | --pf-c-label--m-overflow__content--before--BorderColor | #f0f0f0 | |
.pf-c-label | --pf-c-label--m-overflow__content--link--hover--before--BorderWidth | 2px | |
.pf-c-label | --pf-c-label--m-overflow__content--link--hover--before--BorderColor | #f0f0f0 | |
.pf-c-label | --pf-c-label--m-overflow__content--link--focus--before--BorderWidth | 2px | |
.pf-c-label | --pf-c-label--m-overflow__content--link--focus--before--BorderColor | #f0f0f0 | |
.pf-c-label | --pf-c-label__content--Color | #151515 | |
.pf-c-label | --pf-c-label--m-outline__content--Color | #151515 | |
.pf-c-label | --pf-c-label__text--MaxWidth | 16ch | |
.pf-c-label | --pf-c-label__icon--Color | #151515 | |
.pf-c-label | --pf-c-label__icon--MarginRight | 0.25rem | |
.pf-c-label | --pf-c-label__c-button--FontSize | 0.75rem | |
.pf-c-label | --pf-c-label__c-button--MarginTop | calc(0.375rem * -1) | |
.pf-c-label | --pf-c-label__c-button--MarginRight | calc(0.375rem * -1) | |
.pf-c-label | --pf-c-label__c-button--MarginBottom | calc(0.375rem * -1) | |
.pf-c-label | --pf-c-label__c-button--MarginLeft | 0.25rem | |
.pf-c-label | --pf-c-label__c-button--PaddingTop | 0.25rem | |
.pf-c-label | --pf-c-label__c-button--PaddingRight | 0.5rem | |
.pf-c-label | --pf-c-label__c-button--PaddingBottom | 0.25rem | |
.pf-c-label | --pf-c-label__c-button--PaddingLeft | 0.5rem | |
.pf-c-label.pf-m-blue | --pf-c-label--BackgroundColor | #e7f1fa | |
.pf-c-label.pf-m-blue | --pf-c-label__icon--Color | #06c | |
.pf-c-label.pf-m-blue | --pf-c-label__content--Color | #002952 | |
.pf-c-label.pf-m-blue | --pf-c-label__content--before--BorderColor | #bee1f4 | |
.pf-c-label.pf-m-blue | --pf-c-label__content--link--hover--before--BorderColor | #06c | |
.pf-c-label.pf-m-blue | --pf-c-label__content--link--focus--before--BorderColor | #06c | |
.pf-c-label.pf-m-blue | --pf-c-label--m-outline__content--Color | #06c | |
.pf-c-label.pf-m-blue | --pf-c-label--m-outline__content--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-blue | --pf-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-blue | --pf-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-green | --pf-c-label--BackgroundColor | #f3faf2 | |
.pf-c-label.pf-m-green | --pf-c-label__icon--Color | #3e8635 | |
.pf-c-label.pf-m-green | --pf-c-label__content--Color | #1e4f18 | |
.pf-c-label.pf-m-green | --pf-c-label__content--before--BorderColor | #bde5b8 | |
.pf-c-label.pf-m-green | --pf-c-label__content--link--hover--before--BorderColor | #3e8635 | |
.pf-c-label.pf-m-green | --pf-c-label__content--link--focus--before--BorderColor | #3e8635 | |
.pf-c-label.pf-m-green | --pf-c-label--m-outline__content--Color | #3e8635 | |
.pf-c-label.pf-m-green | --pf-c-label--m-outline__content--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-green | --pf-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-green | --pf-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-orange | --pf-c-label--BackgroundColor | #fdf7e7 | |
.pf-c-label.pf-m-orange | --pf-c-label__icon--Color | #ec7a08 | |
.pf-c-label.pf-m-orange | --pf-c-label__content--Color | #3d2c00 | |
.pf-c-label.pf-m-orange | --pf-c-label__content--before--BorderColor | #f4b678 | |
.pf-c-label.pf-m-orange | --pf-c-label__content--link--hover--before--BorderColor | #ec7a08 | |
.pf-c-label.pf-m-orange | --pf-c-label__content--link--focus--before--BorderColor | #ec7a08 | |
.pf-c-label.pf-m-orange | --pf-c-label--m-outline__content--Color | #8f4700 | |
.pf-c-label.pf-m-orange | --pf-c-label--m-outline__content--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-orange | --pf-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-orange | --pf-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-red | --pf-c-label--BackgroundColor | #faeae8 | |
.pf-c-label.pf-m-red | --pf-c-label__icon--Color | #c9190b | |
.pf-c-label.pf-m-red | --pf-c-label__content--Color | #7d1007 | |
.pf-c-label.pf-m-red | --pf-c-label__content--before--BorderColor | #c9190b | |
.pf-c-label.pf-m-red | --pf-c-label__content--link--hover--before--BorderColor | #c9190b | |
.pf-c-label.pf-m-red | --pf-c-label__content--link--focus--before--BorderColor | #c9190b | |
.pf-c-label.pf-m-red | --pf-c-label--m-outline__content--Color | #c9190b | |
.pf-c-label.pf-m-red | --pf-c-label--m-outline__content--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-red | --pf-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-red | --pf-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-purple | --pf-c-label--BackgroundColor | #f2f0fc | |
.pf-c-label.pf-m-purple | --pf-c-label__icon--Color | #6753ac | |
.pf-c-label.pf-m-purple | --pf-c-label__content--Color | #1f0066 | |
.pf-c-label.pf-m-purple | --pf-c-label__content--before--BorderColor | #cbc1ff | |
.pf-c-label.pf-m-purple | --pf-c-label__content--link--hover--before--BorderColor | #6753ac | |
.pf-c-label.pf-m-purple | --pf-c-label__content--link--focus--before--BorderColor | #6753ac | |
.pf-c-label.pf-m-purple | --pf-c-label--m-outline__content--Color | #6753ac | |
.pf-c-label.pf-m-purple | --pf-c-label--m-outline__content--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-purple | --pf-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-purple | --pf-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-cyan | --pf-c-label--BackgroundColor | #f2f9f9 | |
.pf-c-label.pf-m-cyan | --pf-c-label__icon--Color | #009596 | |
.pf-c-label.pf-m-cyan | --pf-c-label__content--Color | #003737 | |
.pf-c-label.pf-m-cyan | --pf-c-label__content--before--BorderColor | #a2d9d9 | |
.pf-c-label.pf-m-cyan | --pf-c-label__content--link--hover--before--BorderColor | #009596 | |
.pf-c-label.pf-m-cyan | --pf-c-label__content--link--focus--before--BorderColor | #009596 | |
.pf-c-label.pf-m-cyan | --pf-c-label--m-outline__content--Color | #005f60 | |
.pf-c-label.pf-m-cyan | --pf-c-label--m-outline__content--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-cyan | --pf-c-label--m-outline__content--link--hover--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-cyan | --pf-c-label--m-outline__content--link--focus--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-outline | --pf-c-label__content--Color | #151515 | |
.pf-c-label.pf-m-outline | --pf-c-label__content--before--BorderWidth | 1px | |
.pf-c-label.pf-m-outline | --pf-c-label__content--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-outline | --pf-c-label--BackgroundColor | #fff | |
.pf-c-label.pf-m-overflow:hover | --pf-c-label__content--before--BorderWidth | 2px | |
.pf-c-label.pf-m-overflow:hover | --pf-c-label__content--before--BorderColor | #d2d2d2 | |
.pf-c-label.pf-m-overflow:focus | --pf-c-label__content--before--BorderWidth | 2px | |
.pf-c-label.pf-m-overflow:focus | --pf-c-label__content--before--BorderColor | #d2d2d2 | |
.pf-c-label .pf-c-button | --pf-c-button--FontSize | 0.75rem | |
.pf-c-label .pf-c-button | --pf-c-button--PaddingTop | 0.25rem | |
.pf-c-label .pf-c-button | --pf-c-button--PaddingRight | 0.5rem | |
.pf-c-label .pf-c-button | --pf-c-button--PaddingBottom | 0.25rem | |
.pf-c-label .pf-c-button | --pf-c-button--PaddingLeft | 0.5rem | |
.pf-c-label.pf-m-overflow | --pf-c-label__content--Color | #06c | |
.pf-c-label.pf-m-overflow | --pf-c-label--BackgroundColor | #fff | |
.pf-c-label.pf-m-overflow | --pf-c-label__content--before--BorderWidth | 1px | |
.pf-c-label.pf-m-overflow | --pf-c-label__content--before--BorderColor | #f0f0f0 | |
.pf-c-label.pf-m-overflow | --pf-c-label__content--link--hover--before--BorderWidth | 2px | |
.pf-c-label.pf-m-overflow | --pf-c-label__content--link--hover--before--BorderColor | #f0f0f0 | |
.pf-c-label.pf-m-overflow | --pf-c-label__content--link--focus--before--BorderWidth | 2px | |
.pf-c-label.pf-m-overflow | --pf-c-label__content--link--focus--before--BorderColor | #f0f0f0 | |
a.pf-c-label__content:hover | --pf-c-label__content--before--BorderWidth | 2px | |
a.pf-c-label__content:hover | --pf-c-label__content--before--BorderColor | #8a8d90 | |
a.pf-c-label__content:focus | --pf-c-label__content--before--BorderWidth | 2px | |
a.pf-c-label__content:focus | --pf-c-label__content--before--BorderColor | #8a8d90 | |
View source on GitHub