Tabs

Switch between views of the same content without leaving the page.

Needs dsgn.js components/tabs.css

Sections of one object

Client, items and totals.

<div class="dsgn-tabs"><div role="tablist" aria-label="Invoice sections">
  <button role="tab" class="dsgn-tab" id="dx-t1" aria-controls="dx-p1" aria-selected="true"><span class="dsgn-icon" aria-hidden="true">description</span>Overview</button>
  <button role="tab" class="dsgn-tab" id="dx-t2" aria-controls="dx-p2" aria-selected="false"><span class="dsgn-icon" aria-hidden="true">history</span>History</button>
  <button role="tab" class="dsgn-tab" id="dx-t3" aria-controls="dx-p3" aria-selected="false" disabled><span class="dsgn-icon" aria-hidden="true">inventory_2</span>Archive</button></div>
  <div role="tabpanel" class="dsgn-tabpanel" id="dx-p1" aria-labelledby="dx-t1"><p class="dsgn-body-s dsgn-muted">Client, items and totals.</p></div>
  <div role="tabpanel" class="dsgn-tabpanel" id="dx-p2" aria-labelledby="dx-t2" hidden><p class="dsgn-body-s dsgn-muted">Sent 28 Sep · opened 29 Sep.</p></div>
  <div role="tabpanel" class="dsgn-tabpanel" id="dx-p3" aria-labelledby="dx-t3" hidden></div></div>

Usage

Tab height = control height. The selected tab has a 2 px accent indicator and a filled icon. Arrow keys move between tabs, Home/End jump to the ends (automatic activation).

Details

Classes: .dsgn-tabs .dsgn-tab .dsgn-icon .dsgn-tabpanel
Tokens used: --dsgn-border --dsgn-control-font-size --dsgn-control-gap --dsgn-control-line-height --dsgn-control-pad-x --dsgn-control-pad-y --dsgn-control-solid --dsgn-duration --dsgn-duration-fast --dsgn-ease --dsgn-focus --dsgn-focus-offset --dsgn-focus-width --dsgn-font-sans --dsgn-font-weight-medium --dsgn-line-separator --dsgn-radius-full --dsgn-radius-m --dsgn-radius-s --dsgn-space-2 --dsgn-space-4 --dsgn-stack --dsgn-text --dsgn-text-disabled --dsgn-text-muted
In Figma: Tab · Tab list
Import alone: dsgn.systems/components/tabs.css