Toggle between a small set of related options
For view modes or filters where the active segment fills with the action colour, or a quiet grey with the neutral tone. Works well for 2 to 4 choices. Use Tabs instead when the options represent distinct content sections with their own panels.
Default
With icons
Neutral
tone="neutral" fills the active segment with a solid grey instead of the primary colour, for sets where the selection should read quietly.
Full width
With disabled segment
Compact
Cycle
cycle draws one circle in place of the strip, for a seat with room for a single control, such as a collapsed rail's foot. Each press steps to the next enabled segment, and the current label is its tooltip.
Grid
// From the npm package
import { SegmentedControl } from 'rift-ds/components/SegmentedControl/SegmentedControl';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/segmented-control.json