Irozon Design System — design foundations, tokens and components by Irozon AB.
Irozon — Design System
Irozon Design System · v1.0
Components / Tabs

A small Green marker, never a filled pill.

Tabs v1 — packages/design-system/src/components/tabs.css. The WAI-ARIA Tabs pattern throughout — styled entirely from [aria-selected="true"], never an .is-active class.

List
.iz-tabs with role="tablist" and an aria-label.
Tab
.iz-tab, a real <button>, role="tab", aria-selected, aria-controls.
Panel
.iz-tab-panel, role="tabpanel", aria-labelledby pointing back at its tab.
Variant
data-variant="stretched" — tabs fill the row equally. Default is content-width.
Tabs vs. navigation

Same look, different job.

Tabs switch content within the current view — the URL doesn't necessarily change, and the WAI-ARIA Tabs pattern applies. A row of links that merely looks tab-like (e.g. a page's own top-level section switcher backed by real routes) is navigation: plain <a href> elements, current page marked with aria-current="page" — never role="tab". Using the Tabs pattern for real navigation breaks browser back/forward and bookmarking; using plain links for in-page view switching loses the keyboard model (arrow keys, roving tabindex) users expect from tabs.

Content switching

Try it — click, or use arrow keys.

Click a tab, or focus the tablist and use Left/Right (or Up/Down), Home and End. Only the selected tab is in the Tab-key sequence — the rest are reached with arrow keys, per the roving-tabindex pattern.

Plan: Scale · MRR: $1,240 · 18 seats.

data-variant="stretched" — equal-width, no panels wired (static example)
Dark theme

Semantic tokens only.

Accessibility

Follows the WAI-ARIA Tabs pattern exactly.

Roles
role="tablist" on the container, role="tab" on each trigger, role="tabpanel" on each panel — all native ARIA, no custom widget semantics invented.
Selection state
aria-selected is the only source of truth; the underline and text-color styling both key off it.
Keyboard
Arrow keys move focus between tabs (Left/Right or Up/Down depending on orientation), Home/End jump to the first/last tab, and only the selected tab sits in the page's Tab order (roving tabindex) — implemented in the page's demo JS, not the canonical CSS.
Panel association
Each tab's aria-controls points at its panel's id; each panel's aria-labelledby points back at its tab.
Reduced motion
The underline's reveal transition drops out entirely under prefers-reduced-motion: reduce — selection still reads instantly from text color and aria-selected.