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

Assets, source, tooling, and content for PatternFly 4

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

## Examples

### Filled

```html
<strong>Non-status:</strong>

<br />
<br />

<span class="pf-v6-c-label pf-m-filled">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__text">Grey</span>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span class="pf-v6-c-label__text">Grey icon</span>
  </span>
</span>

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

<span class="pf-v6-c-label pf-m-filled">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="grey-filled-icon-removable-text"
    >Grey icon removable</span>
  </span>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="grey-filled-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="grey-filled-icon-removable-button grey-filled-icon-removable-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-clickable">
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
    <span class="pf-v6-c-label__text">Grey link</span>
  </a>
</span>

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

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

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

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

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

<span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-clickable">
  <a
    class="pf-v6-c-label__content pf-m-clickable"
    href="#"
    tabindex="-1"
    aria-disabled="true"
  >
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="grey-filled-link-removable-disabled-text"
    >Grey link removable (disabled)</span>
  </a>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      disabled
      id="grey-filled-link-removable-disabled-button"
      aria-label="Remove"
      aria-labelledby="grey-filled-link-removable-disabled-button grey-filled-link-removable-disabled-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-clickable">
  <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="grey-filled-button-removable-disabled-text"
    >Grey button removable (disabled)</span>
  </button>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      disabled
      id="grey-filled-button-removable-disabled-button"
      aria-label="Remove"
      aria-labelledby="grey-filled-button-removable-disabled-button grey-filled-button-removable-disabled-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

<br />
<br />

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

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

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

<span class="pf-v6-c-label pf-m-filled pf-m-blue">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="blue-filled-icon-removable-text"
    >Blue icon removable</span>
  </span>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="blue-filled-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="blue-filled-icon-removable-button blue-filled-icon-removable-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

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

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

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

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

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

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

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

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

<br />
<br />

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

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

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

<span class="pf-v6-c-label pf-m-filled pf-m-green">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="green-filled-icon-removable-text"
    >Green icon removable</span>
  </span>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="green-filled-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="green-filled-icon-removable-button green-filled-icon-removable-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

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

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

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

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

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

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

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

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

<br />
<br />

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

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

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

<span class="pf-v6-c-label pf-m-filled pf-m-orange">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="orange-filled-icon-removable-text"
    >Orange icon removable</span>
  </span>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="orange-filled-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="orange-filled-icon-removable-button orange-filled-icon-removable-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

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

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

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

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

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

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

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

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

<br />
<br />

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

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

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

<span class="pf-v6-c-label pf-m-filled pf-m-red">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="red-filled-icon-removable-text"
    >Red icon removable</span>
  </span>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="red-filled-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="red-filled-icon-removable-button red-filled-icon-removable-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

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

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

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

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

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

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

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

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

<br />
<br />

<span class="pf-v6-c-label pf-m-filled pf-m-orangered">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__text">Orange red</span>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-orangered">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span class="pf-v6-c-label__text">Orange red icon</span>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-orangered">
  <span class="pf-v6-c-label__content">
    <span
      class="pf-v6-c-label__text"
      id="orangered-filled-removable-text"
    >Orange red removable</span>
  </span>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="orangered-filled-removable-button"
      aria-label="Remove"
      aria-labelledby="orangered-filled-removable-button orangered-filled-removable-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-orangered">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="orangered-filled-icon-removable-text"
    >Orange red icon removable</span>
  </span>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="orangered-filled-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="orangered-filled-icon-removable-button orangered-filled-icon-removable-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-orangered pf-m-clickable">
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
    <span class="pf-v6-c-label__text">Orange red link</span>
  </a>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-orangered pf-m-clickable">
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
    <span class="pf-v6-c-label__text">Orange red button</span>
  </button>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-orangered pf-m-clickable">
  <a class="pf-v6-c-label__content pf-m-clickable" href="#">
    <span
      class="pf-v6-c-label__text"
      id="orangered-filled-link-removable-text"
    >Orange red link removable</span>
  </a>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="orangered-filled-link-removable-button"
      aria-label="Remove"
      aria-labelledby="orangered-filled-link-removable-button orangered-filled-link-removable-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-orangered pf-m-clickable">
  <button class="pf-v6-c-label__content pf-m-clickable" type="button">
    <span
      class="pf-v6-c-label__text"
      id="orangered-filled-button-removable-text"
    >Orange red button removable</span>
  </button>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="orangered-filled-button-removable-button"
      aria-label="Remove"
      aria-labelledby="orangered-filled-button-removable-button orangered-filled-button-removable-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-orangered">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      style="--pf-v6-c-label__text--MaxWidth: 28ch"
    >Orange red label, max-width truncation customization</span>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-orangered">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="orangered-filled-truncated-with-icon-text"
      style="--pf-v6-c-label__text--MaxWidth: 38ch"
    >Orange red label with icon and set max-width truncation customization</span>
  </span>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="orangered-filled-truncated-with-icon-button"
      aria-label="Remove"
      aria-labelledby="orangered-filled-truncated-with-icon-button orangered-filled-truncated-with-icon-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

<span
  class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-orangered pf-m-clickable"
>
  <a
    class="pf-v6-c-label__content pf-m-clickable"
    href="#"
    tabindex="-1"
    aria-disabled="true"
  >
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="orangered-filled-link-removable-disabled-text"
    >Orange red link removable (disabled)</span>
  </a>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      disabled
      id="orangered-filled-link-removable-disabled-button"
      aria-label="Remove"
      aria-labelledby="orangered-filled-link-removable-disabled-button orangered-filled-link-removable-disabled-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

<span
  class="pf-v6-c-label pf-m-filled pf-m-disabled pf-m-orangered pf-m-clickable"
>
  <button class="pf-v6-c-label__content pf-m-clickable" type="button" disabled>
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="orangered-filled-button-removable-disabled-text"
    >Orange red button removable (disabled)</span>
  </button>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      disabled
      id="orangered-filled-button-removable-disabled-button"
      aria-label="Remove"
      aria-labelledby="orangered-filled-button-removable-disabled-button orangered-filled-button-removable-disabled-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

<br />
<br />

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

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

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

<span class="pf-v6-c-label pf-m-filled pf-m-purple">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="purple-filled-icon-removable-text"
    >Purple icon removable</span>
  </span>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="purple-filled-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="purple-filled-icon-removable-button purple-filled-icon-removable-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

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

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

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

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

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

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

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

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

<br />
<br />

<span class="pf-v6-c-label pf-m-filled pf-m-teal">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__text">Teal</span>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-teal">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span class="pf-v6-c-label__text">Teal icon</span>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-teal">
  <span class="pf-v6-c-label__content">
    <span
      class="pf-v6-c-label__text"
      id="teal-filled-removable-text"
    >Teal removable</span>
  </span>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="teal-filled-removable-button"
      aria-label="Remove"
      aria-labelledby="teal-filled-removable-button teal-filled-removable-text"
    >
      <span class="pf-v6-c-button__icon">
        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
      </span>
    </button>
  </span>
</span>

<span class="pf-v6-c-label pf-m-filled pf-m-teal">
  <span class="pf-v6-c-label__content">
    <span class="pf-v6-c-label__icon">
      <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
    </span>
    <span
      class="pf-v6-c-label__text"
      id="teal-filled-icon-removable-text"
    >Teal icon removable</span>
  </span>
  <span class="pf-v6-c-label__actions">
    <button
      class="pf-v6-c-button pf-m-no-padding pf-m-plain"
      type="button"
      id="teal-filled-icon-removable-button"
      aria-label="Remove"
      aria-labelledby="teal-fille