Segment Control Component
Theme Selector
Selected: system
Sizes
Variants
Selected variant: default
Without Labels
Usage Examples
Basic Usage
const [theme, setTheme] = useState("system");
<SegmentControl
options={["system", "light", "dark", "green"]}
value={theme}
onChange={setTheme}
/>Different Sizes
<SegmentControl size="sm" ... /> <SegmentControl size="md" ... /> <SegmentControl size="lg" ... />
Variants
<SegmentControl options={...} value={...} onChange={...} />
<SegmentControl options={...} value={...} onChange={...} variant="outline" />
<SegmentControl options={...} value={...} onChange={...} variant="minimal" />