Segmented
One choice from two to five options, shown as kit minimal Buttons side by side. The chosen one has a brand tint and border.
Master
Switch size and toggle hidden label, full width and disabled. Click an option or use the arrow keys.
Density & text size
Usage
Use Segmented for a small, always-visible choice that applies at once, like density, a view (List / Board) or a period (Day / Week / Month). It works like a radio group: one option is chosen, and arrow keys move the choice. Pass label (visible, or hideLabel), options and value or defaultValue. fullWidth stretches the options to fill the row, like in a menu. For more options or long labels, use Select; for an on/off setting, use Switch. See contracts/segmented.json for the full contract.
Do's
- Density or text size, a view switch (List / Board), or a period (Day / Week / Month).
- A choice from a few options that applies right away and should stay visible.
Don'ts
- Do not invent ToggleGroup, ToggleButtons, Segmented or a ButtonGroup with a pressed button. Options are already kit Buttons.
- Do not use for more than five options or long labels. Use Select.
- Do not use for on/off. Use Switch.
- Do not use for actions. Buttons that do things belong in a ButtonGroup.
- Do not use raw hex.
<Segmented
label="Density & text size"
options={[
{ value: "compact", label: "Compact" },
{ value: "default", label: "Default" },
{ value: "comfortable", label: "Comfortable" },
]}
defaultValue="default"
size="md"
/>