ds
Components
Tabs

Tabs

Canvas tabs from topo and an underlined variant.

Canvas tabs

Checkout

Data platform

Canvas 3

Code

<div class="island">
  <div class="tabs" role="tablist" aria-label="Canvases">
    <div class="tab on" role="tab" aria-selected="true" tabindex="0">
      <span>Checkout</span>
      <button class="tx" aria-label="Close"><svg class="i">…</svg></button>
    </div>
    …
  </div>
</div>

From topo's bottom bar. The close button shows on hover and on the selected tab.

Underlined

The rendered component.

API

Class	On	What it does
`.tabs`	div[role=tablist]	A row of tabs that scrolls sideways when full.
`.tab`	button, div[role=tab]	One tab.
`aria-selected="true" / .on`	.tab	The current tab.
`.tx`	button	Close button inside a tab.
`.line`	.tabs	Underlined variant for page sections.

Accessibility

Only the selected tab is in the tab order (tabindex="0"); arrow keys move between tabs.
Each tab points at its panel with aria-controls.