segment control
SegmentControl is a shared DS navigation primitive that combines the button token contract (height, font, radius, shadow) with an inverse-fill active state. It renders as a tablist of buttons and supports both controlled and uncontrolled selection. Optional icon and count slots let segments carry leading glyphs and trailing badge numbers without breaking the tight single-line layout.
| field | value |
|---|---|
| group | global |
| import | @arieare/ds |
| source | packages/ds/src/components/segment-control/SegmentControl.tsx packages/ds/src/components/segment-control/segment-control.css |
controlled — active: journal
uncontrolled — default: all
component tokens
| token | source | description |
|---|---|---|
--segment-bg | @arieare/ds/segment-control.css | Container background. Defaults to --bkg-2 (cream surface). |
--segment-border | @arieare/ds/segment-control.css | Container border color. Defaults to --ink-1 (primary dark ink). |
--segment-shadow | @arieare/ds/segment-control.css | Container box-shadow. Defaults to 1px 1px 0px --gui-3 (subtle offset shadow). |
--segment-item-ink | @arieare/ds/segment-control.css | Idle segment label and icon color. Defaults to --ink-1. |
--segment-count-ink | @arieare/ds/segment-control.css | Idle segment count color. Defaults to --ink-3 (muted text). |
--segment-active-bg | @arieare/ds/segment-control.css | Active segment fill. Defaults to --bkg-3 (inverse dark surface). |
--segment-active-ink | @arieare/ds/segment-control.css | Active segment label and icon color. Defaults to --gui-1 (light cream). |
--segment-active-count-ink | @arieare/ds/segment-control.css | Active segment count color. Defaults to --gui-2 (slightly muted on dark fill). |
--btn-h / --rds-interact / --p-size-2 / --p-size-6 | @arieare/ds/tokens.css | Inherited button sizing tokens: container height (20px), border-radius (2px), and gap/padding primitives. |
--type-p-base / --type-p-base-feature-settings | @arieare/ds/tokens.css | Inherited typography: JetBrains Mono 14px/20px with OpenType lowercase features. |
props
| prop | type | default | description |
|---|---|---|---|
items | SegmentItem<T>[] | — | Array of segment definitions. Each item requires a value and label; icon, trailingIcon, and count are optional slots. |
value | T | — | Controlled selected value. When provided, the component is fully controlled. |
defaultValue | T | — | Initial selected value for uncontrolled usage. |
onChange | (value: T) => void | — | Callback fired when the active segment changes. |
...div attributes | HTMLAttributes<HTMLDivElement> | — | Forwards standard div attributes and className to the wrapper. |