← General Design System
Tabs & SegmentedControl
Single-choice switchers — 1:1 with Mantine, on our tokens. Both are built the same way:
an atom (one tab / one segment, with its states) composed into a molecule (the tab list / the control).
Sizes 32 · 36 · 40. Shown atoms → molecules.
Atoms · the indivisible element + its variants & states
Tab · atom
states: default · hover · active · disabled · variants: icon · badge
Segment · atom
states: inactive · hover · active · disabled · variant: icon
Molecules · assembled from the atoms
Tabs · underline
tab list · sizes 32/36/40 · icons · badge · disabled · full-width · with panel
SegmentedControl
track + sliding white card · equal-width segments · sizes 32/36/40 · default & icon