Default

Default
Example:
<pfe-label>Default</pfe-label>

Color Options

Blue label Green label Orange label Red Hat label Purple label Cyan label Grey label
Example:
<pfe-label color="blue">Blue label</pfe-label>

Outline versions

Default Blue label Green label Orange label Red label Purple label Cyan label Grey label
Example:
<pfe-label color="red" outline>Red label</pfe-label>

With Icon

Default Blue label Green label Orange label Red label Purple label Cyan label Grey label
Example:
<pfe-label color="green" icon="rh-icon-virtual-storage-stack" outline>Green label</pfe-label>
Empty Icon Attribute Example: No Icon
<pfe-label color="red" icon="">No Icon</pfe-label>

Labels are inline-flex and will wrap at max width of parent element

Default Blue label Green label Orange label Red label Some intertwined text Orange label Red label Purple label amongst the labels Cyan label Grey label

In a h1 header Red

<h1 style="display: flex; align-items: center; gap: 0.5rem;">Header Text <pfe-label color="red" ...>Label Text</pfe-label></h1>

In a h2 header Cyan

In a h3 header Purple