Components
Switchers
The segmented switcher with the sliding thumb — the dashboard's signature control. Light for filters inside a page, dark for navigation and modes. Arrow keys move between options.
Light
Periods, modes, views. The white thumb glides on one easing.
Dark
Page navigation and strong modes. The black oval casts a soft shadow.
With counts
Filter tabs show how many items each option holds.
Full width
Inside cards and on phones the switcher fills its container.
Props
| Prop | Values | Default | What it does |
|---|---|---|---|
options | string[] | { value, label, count? }[] | — | The choices |
value | bindable | — | The chosen value |
dark | boolean | false | Black oval thumb (navigation, modes) |
full | boolean | false | Fill the container, options share the width |
size | 'sm' | 'md' | 'lg' | 'md' | Text and padding size |
label | string | 'Choose one' | What screen readers announce for the group |
onchange | (value) => void | — | Called after a new option is picked |