Toggle between a small set of related options
For view modes or filters where the active segment fills with the primary colour, or a quiet grey with the neutral variant. 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
The neutral variant 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
// 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