Tabs

.talos-tabs is the in-console section switcher. The active tab carries an accent underline tick that rides the row’s shared bottom border — selection is a bright hairline edge, never a heavy fill. State lives entirely on aria-selected: the markup encodes which tab is current, and the tick follows it.

Default

<div class="talos-tabs" role="tablist">
  <button class="talos-tab" role="tab" aria-selected="true">Overview</button>
  <button class="talos-tab" role="tab" aria-selected="false">Metrics</button>
  <button class="talos-tab" role="tab" aria-selected="false">Logs</button>
</div>

Display-font, light weight, uppercase HUD tracking. aria-selected="true" scales the accent underline in (--talos-ease-glass) and lifts the label to primary text; hover brightens an unselected label. Toggle aria-selected in JS to switch.

Segmented

<div class="talos-tabs--segmented" role="tablist">
  <button class="talos-tab" role="tab" aria-selected="true">Day</button>
  <button class="talos-tab" role="tab" aria-selected="false">Week</button>
  <button class="talos-tab" role="tab" aria-selected="false">Month</button>
</div>

--segmented boxes the tabs into one bordered control with hairline dividers. The underline tick is dropped; the active segment fills to --talos-surface-3 instead. Inline-flex, so it shrinks to its contents.

With panel

<div class="talos-tabs" role="tablist">
  <button class="talos-tab" role="tab" aria-selected="true">Overview</button>
  <button class="talos-tab" role="tab" aria-selected="false">Metrics</button>
</div>
<div class="talos-tabpanel" role="tabpanel">…</div>

.talos-tabpanel pads the content area below the tab row. Show/hide panels in JS in step with the aria-selected toggle.

Classes