PatternFly Elements
Label
Overview
Label
Installation
npm install @patternfly/pfe-labelUsage
Default
<pfe-label>Default</pfe-label>With a color
Available colors are: grey (default), red, blue, green, orange, purple, cyan
<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
<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
<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
NoneEvents
NoneCSS 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