Tabs

Tabs organize content into separate views where only one view is visible at a time.

<div class="tng-tabs">
  <button class="is-selected">Tab 1</button>
  <button>Tab 2</button>
  <button>Tab 3</button>
</div>

Default
Contrast

Schemes

EV

<button class="tng-tabs-item is-ev">EV</button>
<button class="tng-tabs-item is-ev is-selected">EV Selected</button>

Default
Contrast

Filled

<button class="tng-tabs-item is-filled">Filled</button>
<button class="tng-tabs-item is-filled is-selected">
  Filled Selected
</button>
<button class="tng-tabs-item is-filled is-ev is-selected">
  EV Filled Selected
</button>

Default
Contrast

States

Disabled

<button class="tng-tabs-item" disabled>Default</button>
<button class="tng-tabs-item is-filled" disabled>Filled</button>

Default
Contrast

Selected

Use .is-selected or aria-selected="true" to indicate the currently selected tab item.

<button class="tng-tabs-item is-selected">Selected Tab</button>

Default
Contrast

Advanced Structure

You can compose our existing layouts and utility classes to create more complex tab items, such as adding images.

By default a selected tab will have all its text in bold. If you want to limit the bold text to a single element, wrap said element in .tng-tabs-item-label.

<button class="tng-tabs-item is-selected">
  <div class="tng-stack align-items-center gap-sm">
    <div class="align-self-start">Label</div>
    <div class="tng-slot is-primary"></div>
    <span class="tng-tabs-item-label">
      Overview
      <span class="fg-primary-default">1</span>
    </span>
  </div>
</button>

Default
Contrast

Overflow

You can use our overflow utility to wrap the tabs container and enable horizontal scrolling when there are too many tabs to fit in the available space.

<div
  class="tng-overflow-scroll-indicators"
  data-overflow-start="true"
  data-overflow-end="true"
>
  <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  <div
    class="tng-overflow-scroll has-hidden-scrollbar is-inline"
    style="max-inline-size: 250px"
  >
    <div class="tng-tabs">
      <button class="tng-tabs-item is-selected">Tab 1</button>
      <button class="tng-tabs-item">Tab 2</button>
      <button class="tng-tabs-item">Tab 3</button>
      <button class="tng-tabs-item">Tab 4</button>
      <button class="tng-tabs-item">Tab 5</button>
    </div>
  </div>
  <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
</div>

Default
Contrast

Recipes

Overview content goes here.

source code

Accessibility

Roles & attributes

The Tabs component follows the WAI-ARIA Tabs pattern:

The container has role="tablist"
Each tab has role="tab" and aria-controls linking to its panel
The active tab has aria-selected="true"
Each panel has role="tabpanel" and aria-labelledby linking back to its tab
Inactive panels use the hidden attribute

Keyboard interaction

Key	Action
`←` / `→`	Move focus between tabs (horizontal tablist)
`Home` / `End`	Move focus to first / last tab
`Enter` / `Space`	Activate the focused tab
`Tab`	Move focus into the active tab panel