@patternfly/patternfly/docs/components/Label/examples/Label.md

Assets, source, tooling, and content for PatternFly 4

---
id: Label
section: components
cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
---import './Label.css'

## Examples

### Filled

```html
<span class="pf-v5-c-label">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Grey</span>
  </span>
</span>

<span class="pf-v5-c-label">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Grey icon</span>
  </span>
</span>

<span class="pf-v5-c-label">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Grey removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="default-removable-button"
      aria-label="Remove"
      aria-labelledby="default-removable-button default-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Grey icon removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="default-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="default-icon-removable-button default-icon-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Grey link</span>
  </a>
</span>

<span class="pf-v5-c-label">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Grey link removable</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="default-link-removable-button"
      aria-label="Remove"
      aria-labelledby="default-link-removable-button default-link-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Grey clickable</span>
  </button>
</span>

<span class="pf-v5-c-label">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Grey clickable removable</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="default-clickable-removable-button"
      aria-label="Remove"
      aria-labelledby="default-clickable-removable-button default-clickable-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 28ch"
    >Grey label, max-width truncation customization</span>
  </span>
</span>

<span class="pf-v5-c-label">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 38ch"
    >Grey label with icon and set max-width truncation customization</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="default-truncated-with-icon-button"
      aria-label="Remove"
      aria-labelledby="default-truncated-with-icon-button default-truncated-with-icon-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled">
  <a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Grey link removable (disabled)</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="default-link-disabled-button"
      aria-label="Remove"
      aria-labelledby="default-link-disabled-button default-link-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled">
  <button class="pf-v5-c-label__content" type="button" disabled>
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Grey clickable removable (disabled)</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="default-clickable-disabled-button"
      aria-label="Remove"
      aria-labelledby="default-clickable-disabled-button default-clickable-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<br />
<br />

<span class="pf-v5-c-label pf-m-blue">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Blue</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-blue">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Blue icon</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-blue">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Blue removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="blue-removable-button"
      aria-label="Remove"
      aria-labelledby="blue-removable-button blue-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-blue">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Blue icon removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="blue-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="blue-icon-removable-button blue-icon-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-blue">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Blue link</span>
  </a>
</span>

<span class="pf-v5-c-label pf-m-blue">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Blue link removable</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="blue-link-removable-button"
      aria-label="Remove"
      aria-labelledby="blue-link-removable-button blue-link-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-blue">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Blue clickable</span>
  </button>
</span>

<span class="pf-v5-c-label pf-m-blue">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Blue clickable removable</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="blue-clickable-removable-button"
      aria-label="Remove"
      aria-labelledby="blue-clickable-removable-button blue-clickable-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-blue">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 28ch"
    >Blue label, max-width truncation customization</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-blue">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 38ch"
    >Blue label with icon and set max-width truncation customization</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="blue-truncated-with-icon-button"
      aria-label="Remove"
      aria-labelledby="blue-truncated-with-icon-button blue-truncated-with-icon-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-blue">
  <a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Blue link removable (disabled)</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="blue-link-disabled-button"
      aria-label="Remove"
      aria-labelledby="blue-link-disabled-button blue-link-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-blue">
  <button class="pf-v5-c-label__content" type="button" disabled>
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Blue clickable removable (disabled)</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="blue-clickable-disabled-button"
      aria-label="Remove"
      aria-labelledby="blue-clickable-disabled-button blue-clickable-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<br />
<br />

<span class="pf-v5-c-label pf-m-green">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Green</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-green">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Green icon</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-green">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Green removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="green-removable-button"
      aria-label="Remove"
      aria-labelledby="green-removable-button green-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-green">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Green icon removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="green-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="green-icon-removable-button green-icon-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-green">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Green link</span>
  </a>
</span>

<span class="pf-v5-c-label pf-m-green">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Green link removable</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="green-link-removable-button"
      aria-label="Remove"
      aria-labelledby="green-link-removable-button green-link-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-green">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Green clickable</span>
  </button>
</span>

<span class="pf-v5-c-label pf-m-green">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Green clickable removable</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="green-clickable-removable-button"
      aria-label="Remove"
      aria-labelledby="green-clickable-removable-button green-clickable-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-green">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 28ch"
    >Green label, max-width truncation customization</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-green">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 38ch"
    >Green label with icon and set max-width truncation customization</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="green-truncated-with-icon-button"
      aria-label="Remove"
      aria-labelledby="green-truncated-with-icon-button green-truncated-with-icon-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-green">
  <a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Green link removable (disabled)</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="green-link-disabled-button"
      aria-label="Remove"
      aria-labelledby="green-link-disabled-button green-link-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-green">
  <button class="pf-v5-c-label__content" type="button" disabled>
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Green clickable removable (disabled)</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="green-clickable-disabled-button"
      aria-label="Remove"
      aria-labelledby="green-clickable-disabled-button green-clickable-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<br />
<br />

<span class="pf-v5-c-label pf-m-orange">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Orange</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-orange">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Orange icon</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-orange">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Orange removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="orange-removable-button"
      aria-label="Remove"
      aria-labelledby="orange-removable-button orange-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-orange">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Orange icon removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="orange-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="orange-icon-removable-button orange-icon-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-orange">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Orange link</span>
  </a>
</span>

<span class="pf-v5-c-label pf-m-orange">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Orange link removable</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="orange-link-removable-button"
      aria-label="Remove"
      aria-labelledby="orange-link-removable-button orange-link-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-orange">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Orange clickable</span>
  </button>
</span>

<span class="pf-v5-c-label pf-m-orange">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Orange clickable removable</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="orange-clickable-removable-button"
      aria-label="Remove"
      aria-labelledby="orange-clickable-removable-button orange-clickable-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-orange">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 28ch"
    >Orange label, max-width truncation customization</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-orange">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 38ch"
    >Orange label with icon and set max-width truncation customization</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="orange-truncated-with-icon-button"
      aria-label="Remove"
      aria-labelledby="orange-truncated-with-icon-button orange-truncated-with-icon-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-orange">
  <a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Orange link removable (disabled)</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="orange-link-disabled-button"
      aria-label="Remove"
      aria-labelledby="orange-link-disabled-button orange-link-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-orange">
  <button class="pf-v5-c-label__content" type="button" disabled>
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Orange clickable removable (disabled)</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="orange-clickable-disabled-button"
      aria-label="Remove"
      aria-labelledby="orange-clickable-disabled-button orange-clickable-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<br />
<br />

<span class="pf-v5-c-label pf-m-red">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Red</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-red">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Red icon</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-red">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Red removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="red-removable-button"
      aria-label="Remove"
      aria-labelledby="red-removable-button red-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-red">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Red icon removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="red-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="red-icon-removable-button red-icon-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-red">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Red link</span>
  </a>
</span>

<span class="pf-v5-c-label pf-m-red">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Red link removable</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="red-link-removable-button"
      aria-label="Remove"
      aria-labelledby="red-link-removable-button red-link-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-red">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Red clickable</span>
  </button>
</span>

<span class="pf-v5-c-label pf-m-red">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Red clickable removable</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="red-clickable-removable-button"
      aria-label="Remove"
      aria-labelledby="red-clickable-removable-button red-clickable-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-red">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 28ch"
    >Red label, max-width truncation customization</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-red">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 38ch"
    >Red label with icon and set max-width truncation customization</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="red-truncated-with-icon-button"
      aria-label="Remove"
      aria-labelledby="red-truncated-with-icon-button red-truncated-with-icon-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-red">
  <a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Red link removable (disabled)</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="red-link-disabled-button"
      aria-label="Remove"
      aria-labelledby="red-link-disabled-button red-link-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-red">
  <button class="pf-v5-c-label__content" type="button" disabled>
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Red clickable removable (disabled)</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="red-clickable-disabled-button"
      aria-label="Remove"
      aria-labelledby="red-clickable-disabled-button red-clickable-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<br />
<br />

<span class="pf-v5-c-label pf-m-purple">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Purple</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-purple">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Purple icon</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-purple">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Purple removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="purple-removable-button"
      aria-label="Remove"
      aria-labelledby="purple-removable-button purple-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-purple">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Purple icon removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="purple-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="purple-icon-removable-button purple-icon-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-purple">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Purple link</span>
  </a>
</span>

<span class="pf-v5-c-label pf-m-purple">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Purple link removable</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="purple-link-removable-button"
      aria-label="Remove"
      aria-labelledby="purple-link-removable-button purple-link-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-purple">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Purple clickable</span>
  </button>
</span>

<span class="pf-v5-c-label pf-m-purple">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Purple clickable removable</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="purple-clickable-removable-button"
      aria-label="Remove"
      aria-labelledby="purple-clickable-removable-button purple-clickable-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-purple">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 28ch"
    >Purple label, max-width truncation customization</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-purple">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 38ch"
    >Purple label with icon and set max-width truncation customization</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="purple-truncated-with-icon-button"
      aria-label="Remove"
      aria-labelledby="purple-truncated-with-icon-button purple-truncated-with-icon-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-purple">
  <a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Purple link removable (disabled)</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="purple-link-disabled-button"
      aria-label="Remove"
      aria-labelledby="purple-link-disabled-button purple-link-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-purple">
  <button class="pf-v5-c-label__content" type="button" disabled>
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Purple clickable removable (disabled)</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="purple-clickable-disabled-button"
      aria-label="Remove"
      aria-labelledby="purple-clickable-disabled-button purple-clickable-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<br />
<br />

<span class="pf-v5-c-label pf-m-cyan">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Cyan</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-cyan">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Cyan icon</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-cyan">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Cyan removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="cyan-removable-button"
      aria-label="Remove"
      aria-labelledby="cyan-removable-button cyan-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-cyan">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Cyan icon removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="cyan-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="cyan-icon-removable-button cyan-icon-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-cyan">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Cyan link</span>
  </a>
</span>

<span class="pf-v5-c-label pf-m-cyan">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Cyan link removable</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="cyan-link-removable-button"
      aria-label="Remove"
      aria-labelledby="cyan-link-removable-button cyan-link-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-cyan">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Cyan clickable</span>
  </button>
</span>

<span class="pf-v5-c-label pf-m-cyan">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Cyan clickable removable</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="cyan-clickable-removable-button"
      aria-label="Remove"
      aria-labelledby="cyan-clickable-removable-button cyan-clickable-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-cyan">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 28ch"
    >Cyan label, max-width truncation customization</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-cyan">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 38ch"
    >Cyan label with icon and set max-width truncation customization</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="cyan-truncated-with-icon-button"
      aria-label="Remove"
      aria-labelledby="cyan-truncated-with-icon-button cyan-truncated-with-icon-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-cyan">
  <a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Cyan link removable (disabled)</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="cyan-link-disabled-button"
      aria-label="Remove"
      aria-labelledby="cyan-link-disabled-button cyan-link-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-cyan">
  <button class="pf-v5-c-label__content" type="button" disabled>
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Cyan clickable removable (disabled)</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="cyan-clickable-disabled-button"
      aria-label="Remove"
      aria-labelledby="cyan-clickable-disabled-button cyan-clickable-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<br />
<br />
<span class="pf-v5-c-label pf-m-gold">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Gold</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-gold">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Gold icon</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-gold">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Gold removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="gold-removable-button"
      aria-label="Remove"
      aria-labelledby="gold-removable-button gold-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-gold">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Gold icon removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="gold-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="gold-icon-removable-button gold-icon-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-gold">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Gold link</span>
  </a>
</span>

<span class="pf-v5-c-label pf-m-gold">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Gold link removable</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="gold-link-removable-button"
      aria-label="Remove"
      aria-labelledby="gold-link-removable-button gold-link-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-gold">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Gold clickable</span>
  </button>
</span>

<span class="pf-v5-c-label pf-m-gold">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Gold clickable removable</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="gold-clickable-removable-button"
      aria-label="Remove"
      aria-labelledby="gold-clickable-removable-button gold-clickable-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-gold">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 28ch"
    >Gold label, max-width truncation customization</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-gold">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 38ch"
    >Gold label with icon and set max-width truncation customization</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="gold-truncated-with-icon-button"
      aria-label="Remove"
      aria-labelledby="gold-truncated-with-icon-button gold-truncated-with-icon-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-gold">
  <a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Gold link removable (disabled)</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="gold-link-disabled-button"
      aria-label="Remove"
      aria-labelledby="gold-link-disabled-button gold-link-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-disabled pf-m-gold">
  <button class="pf-v5-c-label__content" type="button" disabled>
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Gold clickable removable (disabled)</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="gold-clickable-disabled-button"
      aria-label="Remove"
      aria-labelledby="gold-clickable-disabled-button gold-clickable-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

```

### Outline

```html
<span class="pf-v5-c-label pf-m-outline">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Grey</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-outline">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Grey icon</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-outline">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Grey removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="grey-outline-removable-button"
      aria-label="Remove"
      aria-labelledby="grey-outline-removable-button grey-outline-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-outline">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Grey icon removable</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="grey-outline-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="grey-outline-icon-removable-button grey-outline-icon-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-outline">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Grey link</span>
  </a>
</span>

<span class="pf-v5-c-label pf-m-outline">
  <a class="pf-v5-c-label__content" href="#">
    <span class="pf-v5-c-label__text">Grey link removable</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="grey-outline-link-removable-button"
      aria-label="Remove"
      aria-labelledby="grey-outline-link-removable-button grey-outline-link-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-outline">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Grey clickable</span>
  </button>
</span>

<span class="pf-v5-c-label pf-m-outline">
  <button class="pf-v5-c-label__content" type="button">
    <span class="pf-v5-c-label__text">Grey clickable removable</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="grey-outline-clickable-removable-button"
      aria-label="Remove"
      aria-labelledby="grey-outline-clickable-removable-button grey-outline-clickable-removable-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-outline">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 28ch"
    >Grey label, max-width truncation customization</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-outline">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v5-c-label__text"
      style="--pf-v5-c-label__text--MaxWidth: 38ch"
    >Grey label with icon and set max-width truncation customization</span>
  </span>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      id="grey-outline-truncated-with-icon-button"
      aria-label="Remove"
      aria-labelledby="grey-outline-truncated-with-icon-button grey-outline-truncated-with-icon-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-outline pf-m-disabled">
  <a class="pf-v5-c-label__content" href="#" tabindex="-1" aria-disabled="true">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Grey link removable (disabled)</span>
  </a>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="grey-outline-link-disabled-button"
      aria-label="Remove"
      aria-labelledby="grey-outline-link-disabled-button grey-outline-link-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<span class="pf-v5-c-label pf-m-outline pf-m-disabled">
  <button class="pf-v5-c-label__content" type="button" disabled>
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Grey clickable removable (disabled)</span>
  </button>
  <span class="pf-v5-c-label__actions">
    <button
      class="pf-v5-c-button pf-m-plain"
      type="button"
      disabled
      id="grey-outline-clickable-disabled-button"
      aria-label="Remove"
      aria-labelledby="grey-outline-clickable-disabled-button grey-outline-clickable-disabled-text"
    >
      <i class="fas fa-times fa-fw" aria-hidden="true"></i>
    </button>
  </span>
</span>

<br />
<br />

<span class="pf-v5-c-label pf-m-outline pf-m-blue">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__text">Blue</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-outline pf-m-blue">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c-label__icon">
      <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
    </span>
    <span class="pf-v5-c-label__text">Blue icon</span>
  </span>
</span>

<span class="pf-v5-c-label pf-m-outline pf-m-blue">
  <span class="pf-v5-c-label__content">
    <span class="pf-v5-c