Tabs

Plain CSS implementation of the Figma Tabs section, node 1606:6179.

Item Counts

Panels

Panel visibility and selected state are controlled by the consuming application.

States

Dark Theme

CSS API

Use aria-selected="true" as the primary selected-state hook. Keyboard behavior and panel state are owned by the consuming application.

<div class="sui-tabs">
  <div class="sui-tabs__list" role="tablist" aria-label="Project tabs">
    <button class="sui-tabs__tab" role="tab" aria-selected="true" aria-controls="panel-a" id="tab-a">Text</button>
    <button class="sui-tabs__tab" role="tab" aria-selected="false" aria-controls="panel-b" id="tab-b" tabindex="-1">Text</button>
  </div>
  <div class="sui-tabs__panel" role="tabpanel" id="panel-a" aria-labelledby="tab-a">Panel</div>
</div>