Skip to content

CSS

Tabs organize content into separate views where only one view is visible at a time. Each item is a <button role="tab"> revealing its own panel — see the Accessibility tab for the roles and keyboard model.

The same .tng-tabs strip also backs the Tab Picker, where each item is a <label> wrapping a native radio and nothing is navigated. The CSS is shared; the nested markup is what differs.

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

Variants

Section titled “Variants”

EV

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

States

Section titled “States”

Disabled

Section titled “Disabled”
<button class="tng-tabs-item" disabled>Default</button>
<button class="tng-tabs-item is-ev" disabled>EV</button>

Selected

Section titled “Selected”

Use .is-selected or aria-selected="true" to indicate the currently selected tab item. The selected item paints its contrast fill from that state alone — there is no extra class to add.

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

Advanced structure

Section titled “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>

Overflow

Section titled “Overflow”

You can use the 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>

Recipes

Section titled “Recipes”

Overview content goes here.

source code