Tabs

Tab list with a pill or underline treatment.

Source: src/stylus/components/tabs.styl

Pills

The selected trigger needs both .active and aria-selected="true".

<div class="tabs">
  <div class="tabs-list" role="tablist">
    <button type="button" class="tabs-trigger active" role="tab" aria-selected="true">Account</button>
    <button type="button" class="tabs-trigger" role="tab" aria-selected="false">Security</button>
    <button type="button" class="tabs-trigger" role="tab" aria-selected="false">API keys</button>
  </div>
</div>

Underline

Add .tabs-underline to the container.

<div class="tabs tabs-underline">
  <div class="tabs-list" role="tablist">
    <button type="button" class="tabs-trigger active" role="tab" aria-selected="true">Overview</button>
    <button type="button" class="tabs-trigger" role="tab" aria-selected="false">Usage</button>
  </div>
</div>