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

Assets, source, tooling, and content for PatternFly 4

---
id: Tabs
section: components
cssPrefix: pf-v5-c-tabs
---import './Tabs.css'

# Examples

## Default

### Default tabs example

```html
<div class="pf-v5-c-tabs" role="region" id="default-tabs">
  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll left"
  >
    <i class="fas fa-angle-left" aria-hidden="true"></i>
  </button>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="default-tabs-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="default-tabs-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="default-tabs-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        disabled
        role="tab"
        id="default-tabs-disabled-link"
      >
        <span class="pf-v5-c-tabs__item-text">Disabled</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link pf-m-aria-disabled"
        aria-disabled="true"
        role="tab"
        id="default-tabs-aria-disabled-link"
      >
        <span class="pf-v5-c-tabs__item-text">ARIA disabled</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="default-tabs-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>

  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll right"
  >
    <i class="fas fa-angle-right" aria-hidden="true"></i>
  </button>
</div>

```

### Default tabs usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-m-disabled` | `a.pf-v5-c-tabs__link` | Modifies a tabs link for disabled styles. |
| `.pf-m-aria-disabled` | `.pf-v5-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |

## Overflow

### Overflow beginning of list example

```html
<div
  class="pf-v5-c-tabs pf-m-scrollable"
  role="region"
  id="overflow-beginning-of-list"
>
  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-label="Scroll left"
  >
    <i class="fas fa-angle-left" aria-hidden="true"></i>
  </button>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="overflow-beginning-of-list-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="overflow-beginning-of-list-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="overflow-beginning-of-list-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="overflow-beginning-of-list-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="overflow-beginning-of-list-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="overflow-beginning-of-list-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="overflow-beginning-of-list-cloud-link"
      >
        <span class="pf-v5-c-tabs__item-text">Hybrid Cloud</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="overflow-beginning-of-list-automation-link"
      >
        <span class="pf-v5-c-tabs__item-text">Automation</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="overflow-beginning-of-list-files-link"
      >
        <span class="pf-v5-c-tabs__item-text">Files</span>
      </button>
    </li>
  </ul>

  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    aria-label="Scroll right"
  >
    <i class="fas fa-angle-right" aria-hidden="true"></i>
  </button>
</div>

```

### Overflow beginning of list usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-m-scrollable` | `.pf-v5-c-tabs` | Enables the directional scroll buttons. |
| `.pf-v5-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |

### Horizontal overflow example

```html
<div class="pf-v5-c-tabs pf-m-overflow" role="region" id="horizontal-overflow">
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-overflow" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-more-link"
      >
        <span class="pf-v5-c-tabs__item-text">More</span>
        <span class="pf-v5-c-tabs__link-toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
      </button>
    </li>
  </ul>
</div>

```

### Horizontal overflow expanded example

```html
<div
  class="pf-v5-c-tabs pf-m-overflow"
  role="region"
  id="horizontal-overflow-expanded"
>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-expanded-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-expanded-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-expanded-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-expanded-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-expanded-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-expanded-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-overflow" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link pf-m-expanded"
        aria-expanded="true"
        role="tab"
        id="horizontal-overflow-expanded-more-link"
      >
        <span class="pf-v5-c-tabs__item-text">More</span>
        <span class="pf-v5-c-tabs__link-toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
      </button>
    </li>
  </ul>
</div>

```

### Horizontal overflow selected example

```html
<div
  class="pf-v5-c-tabs pf-m-overflow"
  role="region"
  id="horizontal-overflow-selected"
>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-selected-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-selected-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-selected-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-selected-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-selected-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-selected-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
    <li
      class="pf-v5-c-tabs__item pf-m-current pf-m-overflow"
      role="presentation"
    >
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="horizontal-overflow-selected-more-link"
      >
        <span class="pf-v5-c-tabs__item-text">More</span>
        <span class="pf-v5-c-tabs__link-toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
      </button>
    </li>
  </ul>
</div>

```

## Vertical

### Vertical tabs example

```html
<div class="pf-v5-c-tabs pf-m-vertical" role="region" id="vertical-tabs">
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-tabs-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-tabs-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-tabs-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        disabled
        role="tab"
        id="vertical-tabs-disabled-link"
      >
        <span class="pf-v5-c-tabs__item-text">Disabled</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link pf-m-aria-disabled"
        aria-disabled="true"
        role="tab"
        id="vertical-tabs-aria-disabled-link"
      >
        <span class="pf-v5-c-tabs__item-text">ARIA disabled</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-tabs-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>
</div>

```

### Vertical expandable example

```html
<div
  class="pf-v5-c-tabs pf-m-expandable pf-m-vertical"
  role="region"
  id="vertical-expandable"
>
  <div class="pf-v5-c-tabs__toggle">
    <div class="pf-v5-c-tabs__toggle-button">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Details"
        aria-expanded="false"
        id="vertical-expandable-toggle-button"
        aria-labelledby="vertical-expandable-toggle-text vertical-expandable-toggle-button"
      >
        <span class="pf-v5-c-tabs__toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
        <span
          class="pf-v5-c-tabs__toggle-text"
          id="vertical-expandable-toggle-text"
        >Containers</span>
      </button>
    </div>
  </div>

  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>
</div>

```

### Vertical expanded example

```html
<div
  class="pf-v5-c-tabs pf-m-expandable pf-m-expanded pf-m-vertical"
  role="region"
  id="vertical-expanded"
>
  <div class="pf-v5-c-tabs__toggle">
    <div class="pf-v5-c-tabs__toggle-button">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Details"
        aria-expanded="true"
        id="vertical-expanded-toggle-button"
        aria-labelledby="vertical-expanded-toggle-text vertical-expanded-toggle-button"
      >
        <span class="pf-v5-c-tabs__toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
        <span
          class="pf-v5-c-tabs__toggle-text"
          id="vertical-expanded-toggle-text"
        >Containers</span>
      </button>
    </div>
  </div>

  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>
</div>

```

### Vertical expandable responsive example

```html
<div
  class="pf-v5-c-tabs pf-m-expandable pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl"
  role="region"
  id="vertical-expandable-responsive"
>
  <div class="pf-v5-c-tabs__toggle">
    <div class="pf-v5-c-tabs__toggle-button">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Details"
        aria-expanded="false"
        id="vertical-expandable-responsive-toggle-button"
        aria-labelledby="vertical-expandable-responsive-toggle-text vertical-expandable-responsive-toggle-button"
      >
        <span class="pf-v5-c-tabs__toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
        <span
          class="pf-v5-c-tabs__toggle-text"
          id="vertical-expandable-responsive-toggle-text"
        >Containers</span>
      </button>
    </div>
  </div>

  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>
</div>

```

### Vertical expandable example (deprecated)

```html isDeprecated
<div
  class="pf-v5-c-tabs pf-m-expandable pf-m-vertical"
  role="region"
  id="vertical-expandable-legacy"
>
  <div class="pf-v5-c-tabs__toggle">
    <div class="pf-v5-c-tabs__toggle-button">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Details"
        aria-expanded="false"
        id="vertical-expandable-legacy-toggle-button"
        aria-labelledby="vertical-expandable-legacy-toggle-text vertical-expandable-legacy-toggle-button"
      >
        <span class="pf-v5-c-tabs__toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <span
      class="pf-v5-c-tabs__toggle-text"
      id="vertical-expandable-legacy-toggle-text"
    >Containers</span>
  </div>

  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-legacy-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-legacy-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-legacy-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-legacy-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-legacy-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-legacy-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>
</div>

```

### Vertical expanded example (deprecated)

```html isDeprecated
<div
  class="pf-v5-c-tabs pf-m-expandable pf-m-expanded pf-m-vertical"
  role="region"
  id="vertical-expanded-legacy"
>
  <div class="pf-v5-c-tabs__toggle">
    <div class="pf-v5-c-tabs__toggle-button">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Details"
        aria-expanded="true"
        id="vertical-expanded-legacy-toggle-button"
        aria-labelledby="vertical-expanded-legacy-toggle-text vertical-expanded-legacy-toggle-button"
      >
        <span class="pf-v5-c-tabs__toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <span
      class="pf-v5-c-tabs__toggle-text"
      id="vertical-expanded-legacy-toggle-text"
    >Containers</span>
  </div>

  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-legacy-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-legacy-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-legacy-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-legacy-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-legacy-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expanded-legacy-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>
</div>

```

### Vertical expandable responsive example (deprecated)

```html isDeprecated
<div
  class="pf-v5-c-tabs pf-m-expandable pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl"
  role="region"
  id="vertical-expandable-responsive-legacy"
>
  <div class="pf-v5-c-tabs__toggle">
    <div class="pf-v5-c-tabs__toggle-button">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Details"
        aria-expanded="false"
        id="vertical-expandable-responsive-legacy-toggle-button"
        aria-labelledby="vertical-expandable-responsive-legacy-toggle-text vertical-expandable-responsive-legacy-toggle-button"
      >
        <span class="pf-v5-c-tabs__toggle-icon">
          <i class="fas fa-angle-right" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <span
      class="pf-v5-c-tabs__toggle-text"
      id="vertical-expandable-responsive-legacy-toggle-text"
    >Containers</span>
  </div>

  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-legacy-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-legacy-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-legacy-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-legacy-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-legacy-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="vertical-expandable-responsive-legacy-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>
</div>

```

## Box

### Box tabs example

```html
<div class="pf-v5-c-tabs pf-m-box" role="region" id="box-tabs">
  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll left"
  >
    <i class="fas fa-angle-left" aria-hidden="true"></i>
  </button>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tabs-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tabs-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tabs-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        disabled
        role="tab"
        id="box-tabs-disabled-link"
      >
        <span class="pf-v5-c-tabs__item-text">Disabled</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link pf-m-aria-disabled"
        aria-disabled="true"
        role="tab"
        id="box-tabs-aria-disabled-link"
      >
        <span class="pf-v5-c-tabs__item-text">ARIA disabled</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tabs-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>

  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll right"
  >
    <i class="fas fa-angle-right" aria-hidden="true"></i>
  </button>
</div>

```

### Box overflow example

```html
<div
  class="pf-v5-c-tabs pf-m-box pf-m-scrollable"
  role="region"
  id="box-overflow"
>
  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-label="Scroll left"
  >
    <i class="fas fa-angle-left" aria-hidden="true"></i>
  </button>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-overflow-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-overflow-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-overflow-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-overflow-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-overflow-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-overflow-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-overflow-cloud-link"
      >
        <span class="pf-v5-c-tabs__item-text">Hybrid Cloud</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-overflow-automation-link"
      >
        <span class="pf-v5-c-tabs__item-text">Automation</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-overflow-files-link"
      >
        <span class="pf-v5-c-tabs__item-text">Files</span>
      </button>
    </li>
  </ul>

  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    aria-label="Scroll right"
  >
    <i class="fas fa-angle-right" aria-hidden="true"></i>
  </button>
</div>

```

### Box vertical example

```html
<div
  class="pf-v5-c-tabs pf-m-box pf-m-vertical"
  role="region"
  id="box-vertical"
>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-vertical-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-vertical-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-vertical-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        disabled
        role="tab"
        id="box-vertical-disabled-link"
      >
        <span class="pf-v5-c-tabs__item-text">Disabled</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link pf-m-aria-disabled"
        aria-disabled="true"
        role="tab"
        id="box-vertical-aria-disabled-link"
      >
        <span class="pf-v5-c-tabs__item-text">ARIA disabled</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-vertical-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>
</div>

```

### Box tabs color scheme light 300 example

```html
<div
  class="pf-v5-c-tabs pf-m-box pf-m-color-scheme--light-300"
  role="region"
  id="box-tabs-color-scheme-light-300"
>
  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll left"
  >
    <i class="fas fa-angle-left" aria-hidden="true"></i>
  </button>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tabs-color-scheme-light-300-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tabs-color-scheme-light-300-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tabs-color-scheme-light-300-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        disabled
        role="tab"
        id="box-tabs-color-scheme-light-300-disabled-link"
      >
        <span class="pf-v5-c-tabs__item-text">Disabled</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link pf-m-aria-disabled"
        aria-disabled="true"
        role="tab"
        id="box-tabs-color-scheme-light-300-aria-disabled-link"
      >
        <span class="pf-v5-c-tabs__item-text">ARIA disabled</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tabs-color-scheme-light-300-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>

  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll right"
  >
    <i class="fas fa-angle-right" aria-hidden="true"></i>
  </button>
</div>
<div class="tabs-example-block tabs-example-block--m-color-scheme--light-300"></div>

```

## Tab insets

### Default tab insets example

```html
<div
  class="pf-v5-c-tabs pf-m-inset-sm-on-md pf-m-inset-lg-on-lg pf-m-inset-2xl-on-xl"
  role="region"
  id="default-tab-insets"
>
  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll left"
  >
    <i class="fas fa-angle-left" aria-hidden="true"></i>
  </button>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="default-tab-insets-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="default-tab-insets-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="default-tab-insets-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="default-tab-insets-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="default-tab-insets-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="default-tab-insets-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>

  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll right"
  >
    <i class="fas fa-angle-right" aria-hidden="true"></i>
  </button>
</div>

```

### Box tab insets example

```html
<div
  class="pf-v5-c-tabs pf-m-box pf-m-inset-sm-on-md pf-m-inset-lg-on-lg pf-m-inset-2xl-on-xl"
  role="region"
  id="box-tab-insets"
>
  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll left"
  >
    <i class="fas fa-angle-left" aria-hidden="true"></i>
  </button>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tab-insets-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tab-insets-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tab-insets-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tab-insets-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tab-insets-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="box-tab-insets-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>

  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll right"
  >
    <i class="fas fa-angle-right" aria-hidden="true"></i>
  </button>
</div>

```

### Page insets example

```html
<div class="pf-v5-c-tabs pf-m-page-insets" role="region" id="page-insets">
  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll left"
  >
    <i class="fas fa-angle-left" aria-hidden="true"></i>
  </button>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="page-insets-users-link"
      >
        <span class="pf-v5-c-tabs__item-text">Users</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="page-insets-containers-link"
      >
        <span class="pf-v5-c-tabs__item-text">Containers</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="page-insets-database-link"
      >
        <span class="pf-v5-c-tabs__item-text">Database</span>
      </button>
    </li>

    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="page-insets-server-link"
      >
        <span class="pf-v5-c-tabs__item-text">Server</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="page-insets-system-link"
      >
        <span class="pf-v5-c-tabs__item-text">System</span>
      </button>
    </li>
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="page-insets-network-wired-link"
      >
        <span class="pf-v5-c-tabs__item-text">Network</span>
      </button>
    </li>
  </ul>

  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll right"
  >
    <i class="fas fa-angle-right" aria-hidden="true"></i>
  </button>
</div>

```

### Insets usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v5-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
| `.pf-m-page-insets` | `.pf-v5-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |

## Icons

### Icons and text example

```html
<div class="pf-v5-c-tabs" role="region" id="icons-and-text">
  <button
    class="pf-v5-c-tabs__scroll-button"
    type="button"
    disabled
    aria-hidden="true"
    aria-label="Scroll left"
  >
    <i class="fas fa-angle-left" aria-hidden="true"></i>
  </button>
  <ul class="pf-v5-c-tabs__list" role="tablist">
    <li class="pf-v5-c-tabs__item" role="presentation">
      <button
        type="button"
        class="pf-v5-c-tabs__link"
        role="tab"
        id="