Tier 1Web (www / app / auth). The full design system: our component library and the components.css recipe. This is the one tier where the recipe is the contract, native tiers take the tokens and nothing else.--segmented-control-bg · --segmented-control-bg-active · --line · --border
01 Segmented control SegmentedControl
Switches a parameter of the current view: theme, layout width, disk usage format, billing period. If it swaps the content region, use Tabs.
roleRadix toggle group, single: radiogroup + aria-checked, never tablist
tray--line behind 1px gaps, --border outline
segment--segmented-control-bg; selected --segmented-control-bg-active + medium weight, no shadow
radius--radius on the tray; segments sit flush
size8 × 16px padding default, 4 × 8px sm
proposed sm and icon-only segments; no screen uses them.
02 Anatomy
--linetray fill, showing as 1px dividers between segments --segmented-control-bgresting segment --segmented-control-bg-activeselected segment, plus medium weight --bordertray outline --radius tray corner (4px in app.put.io); inner corners 3px
Selection is surface plus weight, never yellow. Yellow marks brand and primary actions, not which option is on. Two to three segments ship; past that use a dropdown.