Tabs

Minimalist tab variants: underline, segment, pill.

---

Classes

Class	Purpose
.tabs	Root container
.tabs--underline	Underline active indicator
.tabs--segment	Recessed track with raised active
.tabs--pill	Pill-shaped active background
.tabs__list	Tab button row (flex)
.tabs__tab	Tab button
.tabs__tab--active	Active state
.tabs__icon	Tab icon
.tabs__panel	Content panel

---

Variants

Underline

<div class="tabs tabs--underline">
  <div class="tabs__list" role="tablist">
    <button class="tabs__tab tabs__tab--active" role="tab" aria-selected="true">Oversigt</button>
    <button class="tabs__tab" role="tab" aria-selected="false">Detaljer</button>
    <button class="tabs__tab" role="tab" aria-selected="false">Historik</button>
  </div>
  <div class="tabs__panel" role="tabpanel"><p>Oversigt over systemets status.</p></div>
</div>

Oversigt over systemets status.

Segment

<div class="tabs tabs--segment">
  <div class="tabs__list" role="tablist">
    <button class="tabs__tab tabs__tab--active" role="tab" aria-selected="true">Vue</button>
    <button class="tabs__tab" role="tab" aria-selected="false">Nuxt</button>
    <button class="tabs__tab" role="tab" aria-selected="false">React Native</button>
  </div>
  <div class="tabs__panel" role="tabpanel"><p>Vue 3 komponentbibliotek.</p></div>
</div>

Vue 3 komponentbibliotek.

Pill

<div class="tabs tabs--pill">
  <div class="tabs__list" role="tablist">
    <button class="tabs__tab tabs__tab--active" role="tab" aria-selected="true">Alle</button>
    <button class="tabs__tab" role="tab" aria-selected="false">Atoms</button>
    <button class="tabs__tab" role="tab" aria-selected="false">Molecules</button>
  </div>
  <div class="tabs__panel" role="tabpanel"><p>Viser alle komponenter.</p></div>
</div>

Viser alle komponenter.

---

Accessibility

• Tab list: role="tablist"
• Tabs: role="tab", aria-selected, aria-controls, tabindex
• Panels: role="tabpanel", aria-labelledby
• Keyboard: Arrow keys cycle, Enter/Space activates
• Never disable tabs — remove them or explain empty content