Arctic Design
Get StartedFoundationsComponentsExamples
K

SegmentedControl

Allows users to toggle between multiple, mutually exclusive options presented as segmented buttons.

Usage
Size
import {
SegmentedControl,
SegmentedControlButton,
SegmentedControlProps,
} from '@arctic-kit/snow';
function Demo() {
return (
<SegmentedControl initialSelectedIndex={2} size="medium">
<SegmentedControlButton>React</SegmentedControlButton>
<SegmentedControlButton>Angular</SegmentedControlButton>
<SegmentedControlButton>Vue</SegmentedControlButton>
<SegmentedControlButton>Preact</SegmentedControlButton>
<SegmentedControlButton>Svelte</SegmentedControlButton>
</SegmentedControl>
);
}

API Reference

PropsTypeDefault
colorSnowColorundefined
initialSelectedIndexnumber | undefined0
labelstring | undefined---
requiredboolean | undefined---
size"small" | "medium" | "large"medium