Tabs

A run of choices of which one is current: a panel’s tabs, a subtab bar, a segmented option group. The choices are ds-buttons with role="tab", the current one active. The tabs stand 4px apart, always, and the arrow keys, Home and End move between them.

Try it

Buttons

Example Code

The default face: each tab muted on no ground, the current one on the fill. Arrow keys move between them.

Text

Example Code

The words alone, 4px apart, the current one in the ink. For tabs that stand where a heading would.

Split

Example Code

Joined into one face as the split button, the current one on the accent.

Paper

Example Code

A notebook's tabs hanging from the page's top edge: a row high, the current one on the paper and joined to the page below.

Four faces

Face	Attribute	How it looks	Use it for
Buttons	none (the default)	Each tab one control high, muted on no ground; the current one on the fill in the ink.	A panel’s or a sheet’s tabs.
Text	text	The words alone, no fill in any state; the current one in the ink, the others muted. Each tab keeps its 4px of padding, so the words stand twelve apart, and the run is drawn 4px back so the first word starts on the column’s edge.	Tabs that stand where a heading would, inside a page or a sheet.
Split	split	Joined into one face a control high as the split button draws it: a pixel between the tabs, the run’s outer corners rounded, the current one on the accent.	A compact switch between views of the same thing.
Paper	paper	A notebook’s tabs hanging from a page’s top edge: each a row high with its words on the sixteen, half a square of room at its sides, rounded at the top and square where it joins the page; the current one on the paper’s colour in the ink, so it reads as part of the page below, the others on the quiet fill in the muted ink. The run stands at the page’s edge; the page places it over the band above.	A page’s own tabs on a phone, where there is no room for a bar: a document’s description and its material.

Attributes

Attribute	Type	Default	What it does
text	boolean	false	Text tabs: the words alone, no fill.
split	boolean	false	Split tabs: joined into one face, the current one on the accent.
paper	boolean	false	Paper tabs: a notebook’s tabs a row high, the current one on the paper and joined to the page.
fill	boolean	false	Shares the width equally between the tabs.
wrap	boolean	false	Lets a long run wrap onto more rows.
role	string	tablist	group makes it an option group: its buttons take aria-pressed, grey with the chosen one on the accent.

Each tab is a ds-button with control="host", role="tab", aria-selected and active on the current one. In a split run each tab gets its place, segment="first", "middle" or "last", so only the run’s ends are rounded; in a paper run each tab is marked paper, which gives it the notebook tab’s face.

<ds-tabs text aria-label="Payment">
  <ds-button control="host" role="tab" active aria-selected="true">Details</ds-button>
  <ds-button control="host" role="tab" aria-selected="false">Items</ds-button>
  <ds-button control="host" role="tab" aria-selected="false">Receipt</ds-button>
</ds-tabs>

On Apple platforms and Android it is DS1Tabs with face: .button, .text or .split (Kotlin DS1TabsFace); the paper face is on the web only so far.

Button · Select