PatternFly Elements - Home PatternFly Elements

Label

Overview

Labels allow users to display meta data in a stylized form.

Default

Installation

npm install @patternfly/pfe-label

Usage

Default

Default

<pfe-label>Default</pfe-label>

With a color

Available colors are: grey (default), blue, green, orange, red, purple, cyan, gold

Blue Green Orange Red Purple Cyan Gold

<pfe-label color="blue">Blue</pfe-label>
<pfe-label color="green">Green</pfe-label>
<pfe-label color="orange">Orange</pfe-label>
<pfe-label color="red">Red</pfe-label>
<pfe-label color="purple">Purple</pfe-label>
<pfe-label color="cyan">Cyan</pfe-label>
<pfe-label color="gold">Gold</pfe-label>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the a class.

<pfe-label color="red">Red <span class="visually-hidden-class">Warning</span></pfe-label>

Outline variant

Swaps the color style for a outline styled variant

Blue Green Orange Red Purple Cyan Gold Default

<pfe-label variant="outline" color="blue">Blue</pfe-label>
<pfe-label variant="outline" color="green">Green</pfe-label>
<pfe-label variant="outline" color="orange">Orange</pfe-label>
<pfe-label variant="outline" color="red">Red</pfe-label>
<pfe-label variant="outline" color="purple">Purple</pfe-label>
<pfe-label variant="outline" color="cyan">Cyan</pfe-label>
<pfe-label variant="outline" color="gold">Gold</pfe-label>
<pfe-label variant="outline">Default</pfe-label>

With icon as an attribute

Adds a optional fixed size pfe-icon to the label as a prefix

Globe

<pfe-label color="blue" icon="web-icon-globe">Globe</pfe-label>

Read more about Icon in the PatternFly Elements Icon documentation

With user defined image using slot="icon"

Adds user defined SVG or pfe-icon to the label.

Globe

<pfe-label color="blue">Globe
<svg slot="icon" fill="currentColor"aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" ><path d="M8.5,1A7.5,7.5,0,1,0,16,8.5,7.508,7.508,0,0,0,8.5,1Zm0,13.731a9.636,9.636,0,0,1-1.941-3.724H10.44A9.647,9.647,0,0,1,8.5,14.731ZM6.352,10.007A9.688,9.688,0,0,1,6.351,7h4.3a9.75,9.75,0,0,1,0,3.007ZM2,8.5A6.45,6.45,0,0,1,2.182,7H5.335a10.741,10.741,0,0,0,0,3.007H2.182A6.515,6.515,0,0,1,2,8.5ZM10.442,6H6.557A9.636,9.636,0,0,1,8.5,2.268,9.625,9.625,0,0,1,10.442,6Zm1.222,1h3.154a6.268,6.268,0,0,1,0,3.007H11.663A10.779,10.779,0,0,0,11.664,7ZM14.5,6H11.474A10.619,10.619,0,0,0,9.653,2.109,6.513,6.513,0,0,1,14.5,6ZM7.341,2.109A10.61,10.61,0,0,0,5.524,6H2.5A6.521,6.521,0,0,1,7.341,2.109ZM2.5,11.007H5.528a10.6,10.6,0,0,0,1.821,3.887A6.5,6.5,0,0,1,2.5,11.007Zm7.153,3.884a10.6,10.6,0,0,0,1.819-3.884H14.5A6.518,6.518,0,0,1,9.653,14.891Z"></path></svg>
</pfe-label>

Globe

<pfe-label color="blue">Globe
<pfe-icon slot="icon" icon="web-icon-globe" size="sm"></pfe-icon>
</pfe-label>

Compact style

Creates a compact style label which can be combined with color, variant and icon

Globe Green Orange Red Purple Cyan Gold Default

<pfe-label compact color="blue">Globe
<svg slot="icon" fill="currentColor" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17"><path d="M8.5,1A7.5,7.5,0,1,0,16,8.5,7.508,7.508,0,0,0,8.5,1Zm0,13.731a9.636,9.636,0,0,1-1.941-3.724H10.44A9.647,9.647,0,0,1,8.5,14.731ZM6.352,10.007A9.688,9.688,0,0,1,6.351,7h4.3a9.75,9.75,0,0,1,0,3.007ZM2,8.5A6.45,6.45,0,0,1,2.182,7H5.335a10.741,10.741,0,0,0,0,3.007H2.182A6.515,6.515,0,0,1,2,8.5ZM10.442,6H6.557A9.636,9.636,0,0,1,8.5,2.268,9.625,9.625,0,0,1,10.442,6Zm1.222,1h3.154a6.268,6.268,0,0,1,0,3.007H11.663A10.779,10.779,0,0,0,11.664,7ZM14.5,6H11.474A10.619,10.619,0,0,0,9.653,2.109,6.513,6.513,0,0,1,14.5,6ZM7.341,2.109A10.61,10.61,0,0,0,5.524,6H2.5A6.521,6.521,0,0,1,7.341,2.109ZM2.5,11.007H5.528a10.6,10.6,0,0,0,1.821,3.887A6.5,6.5,0,0,1,2.5,11.007Zm7.153,3.884a10.6,10.6,0,0,0,1.819-3.884H14.5A6.518,6.518,0,0,1,9.653,14.891Z"></path></svg>
</pfe-label>
<pfe-label compact color="green">Green</pfe-label>
<pfe-label compact variant="outline" color="orange">Orange</pfe-label>
<pfe-label compact color="red" icon="web-icon-globe">Red</pfe-label>
<pfe-label compact variant="outline" color="purple">Purple</pfe-label>
<pfe-label compact color="cyan">Cyan</pfe-label>
<pfe-label compact variant="outline" color="gold">Gold <pfe-icon slot="icon" icon="web-icon-globe" size="sm" color="important"></pfe-icon></pfe-label>
<pfe-label compact>Default</pfe-label>

Slots

icon

Contains the labels's icon, e.g. web-icon-alert-success.

Default Slot

Must contain the text for the label.

Attributes

compact

Flag indicating the label is compact

DOM Property
compact
Type
boolean
Default
false
truncated

Flag indicating the label text should be truncated

DOM Property
truncated
Type
boolean
Default
false
removable

Flag indicating the label is removable

DOM Property
removable
Type
boolean
Default
false
close-button-label

Text label for a removable label's close button

DOM Property
closeButtonLabel
Type
string | undefined
Default
unknown
variant

Changes the style of the label.

  • Filled: Colored background with colored border.
  • Outline: White background with colored border.
DOM Property
variant
Type
LabelVariant
Default
'filled'
color

Changes the color of the label

DOM Property
color
Type
LabelColor
Default
'grey'
icon

Shorthand for the icon slot, the value is icon name

DOM Property
icon
Type
string
Default
''

Methods

None

Events

close

when a removable label's close button is clicked

Event Type:
ComposedEvent

CSS Custom Properties

CSS Property Description Default
--pf-c-label--FontSize 0.875em
--pf-c-label--PaddingTop 0.25rem
--pf-c-label--PaddingRight 0.5rem
--pf-c-label--PaddingBottom 0.25rem
--pf-c-label--PaddingLeft 0.5rem
--pf-c-label--Color #151515
--pf-c-label--BackgroundColor #f5f5f5
--pf-c-label--BorderRadius 30em
--pf-c-label__content--MaxWidth 100%
--pf-c-label__content--Color #151515
--pf-c-label__content--before--BorderWidth 1px
--pf-c-label__content--before--BorderColor #d2d2d2
--pf-c-label--m-outline__content--Color #151515
--pf-c-label--m-outline--BackgroundColor #ffffff
--pf-c-label--m-blue__content--Color #002952
--pf-c-label--m-blue--BackgroundColor #e7f1fa
--pf-c-label--m-blue__content--before--BorderColor #bee1f4
--pf-c-label--m-outline--m-blue__content--Color #06c
--pf-c-label--m-cyan__content--Color #3b1f00
--pf-c-label--m-cyan--BackgroundColor #f2f9f9
--pf-c-label--m-cyan__content--before--BorderColor #a2d9d9
--pf-c-label--m-outline--m-cyan__content--Color #005f60
--pf-c-label--m-green__content--Color #1e4f18
--pf-c-label--m-green--BackgroundColor #f3faf2
--pf-c-label--m-green__content--before--BorderColor #bde5b8
--pf-c-label--m-outline--m-green__content--Color #3e8635
--pf-c-label--m-orange__content--Color #003737
--pf-c-label--m-orange--BackgroundColor #fff6ec
--pf-c-label--m-orange__content--before--BorderColor #f4b678
--pf-c-label--m-outline--m-orange__content--Color #8f4700
--pf-c-label--m-purple__content--Color #1f0066
--pf-c-label--m-purple--BackgroundColor #f2f0fc
--pf-c-label--m-purple__content--before--BorderColor #cbc1ff
--pf-c-label--m-outline--m-purple__content--Color #6753ac
--pf-c-label--m-red__content--Color #7d1007
--pf-c-label--m-red--BackgroundColor #faeae8
--pf-c-label--m-red__content--before--BorderColor #c9190b
--pf-c-label--m-outline--m-red__content--Color #c9190b
--pf-c-label--m-gold__content--Color #3d2c00
--pf-c-label--m-gold--BackgroundColor #fdf7e7
--pf-c-label--m-gold__content--before--BorderColor #f9e0a2
--pf-c-label--m-outline--m-gold__content--Color #795600
--pf-c-label--m-blue__icon--Color #06c
--pf-c-label--m-cyan__icon--Color #009596
--pf-c-label--m-green__icon--Color #3e8635
--pf-c-label--m-orange__icon--Color #ec7a08
--pf-c-label--m-red__icon--Color #c9190b
--pf-c-label--m-gold__icon--Color #f0ab00
--pf-c-label--m-compact--PaddingTop 0
--pf-c-label--m-compact--PaddingRight 0.5rem
--pf-c-label--m-compact--PaddingBottom 0
--pf-c-label--m-compact--PaddingLeft 0.5rem

CSS Shadow Parts

icon

container for the label icon

close-button

container for removable labels' close button