PatternFly Elements - Home PatternFly Elements

Label

Overview

Label

Default

Installation

npm install @patternfly/pfe-label

Usage

Default

Default

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

With a color

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

Red

<pfe-label color="red">Red</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>

With an icon

This 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

Outline variant

Swaps the color style for a outline styled variant

Red

<pfe-label color="red" outline>Red</pfe-label>

Slots

Default Slot

Label text

Attributes

color

Sets a value for color for the label Options include grey, blue, green, orange, red, purple, cyan

DOM Property
color
Type
'grey' | 'blue' | 'green' | 'orange' | 'red' | 'purple' | 'cyan' | undefined
Default
'grey'
icon

Sets the value for a icon

DOM Property
icon
Type
string | null | undefined
Default
null
outline

Sets a value for displaying outline version

DOM Property
outline
Type
string | null | undefined
Default
unknown

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pfe-label--PaddingTop

Padding Top

4px

--pfe-label--PaddingRight

Padding Right

8px

--pfe-label--PaddingBottom

Padding Bottom

4px

--pfe-label--PaddingLeft

Padding Left

8px

--pfe-label--BorderRadius

Border Radius

calc(var(--pfe-theme--ui--border-radius, 2px) * 30)

--pfe-label--LineHeight

Line Height

1rem

--pfe-label--IconMargin

Icon Right Margin

3px

--pfe-label--IconColor

Icon Color

var(--pfe-label--TextColor, #151515)

--pfe-label--BackgroundColor

Default Background Color

#f0f0f0

--pfe-label--TextColor

Default Text Color

#151515

--pfe-label--BorderColor

Default Border Color

#d2d2d2

--pfe-label--BlueTextColor

Blue variant Text Color

#002952

--pfe-label--BlueBackgroundColor

Blue variant Background Color

#e7f1fa

--pfe-label--BlueBorderColor

Blue variant Border Color

#bee1f4

--pfe-label--GreenTextColor

Green variant Text Color

#0f280d

--pfe-label--GreenBackgroundColor

Green variant Background Color

#f3faf2

--pfe-label--GreenBorderColor

Green variant Border Color

#bde5b8

--pfe-label--OrangeTextColor

Orange variant Text Color

#3d2c00

--pfe-label--OrangeBackgroundColor

Orange variant Background Color

#fdf7e7

--pfe-label--OrangeBorderColor

Orange variant Border Color

#f9e0a2

--pfe-label--RedTextColor

Red variant Text Color

#7d1007

--pfe-label--RedBackgroundColor

Red variant Background Color

#faeae8

--pfe-label--RedBorderColor

Red variant Border Color

#c9190b

--pfe-label--PurpleTextColor

Purple variant Text Color

#1f0066

--pfe-label--PurpleBackgroundColor

Purple variant Background Color

#f2f0fc

--pfe-label--PurpleBorderColor

Purple variant Border Color

#cbc1ff

--pfe-label--CyanTextColor

Cyan variant Text Color

#003737

--pfe-label--CyanBackgroundColor

Cyan variant Background Color

#f2f9f9

--pfe-label--CyanBorderColor

Cyan variant Border Color

#a2d9d9

--pfe-label--GreyBackgroundColor

Grey variant Background Color

#f0f0f0

--pfe-label--GreyTextColor

Grey variant Text Color

#151515

--pfe-label--GreyBorderColor

Grey variant Border Color

#d2d2d2

--pfe-label--OutlineBackgroundColor

Outline variant Background Color

#ffffff

CSS Shadow Parts

None