<SegmentedControl aria-label="File view">
<SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>
<SegmentedControl.Button>Raw</SegmentedControl.Button>
<SegmentedControl.Button>Blame</SegmentedControl.Button>
</SegmentedControl>
import React from 'react'
import {SegmentedControl} from '@primer/react'
export default function Default() {
const [selectedIndex, setSelectedIndex] = React.useState(0)
const handleChange = (i: number) => {
setSelectedIndex(i)
}
return (
<SegmentedControl aria-label="File view" onChange={handleChange}>
<SegmentedControl.Button selected={selectedIndex === 0}>Preview</SegmentedControl.Button>
<SegmentedControl.Button selected={selectedIndex === 1}>Raw</SegmentedControl.Button>
<SegmentedControl.Button selected={selectedIndex === 2}>Blame</SegmentedControl.Button>
</SegmentedControl>
)
}
Guidelines for icons in segments
<SegmentedControl aria-label="File view">
<SegmentedControl.Button defaultSelected aria-label="Preview" leadingIcon={EyeIcon}>
Preview
</SegmentedControl.Button>
<SegmentedControl.Button aria-label="Raw" leadingIcon={FileCodeIcon}>
Raw
</SegmentedControl.Button>
<SegmentedControl.Button aria-label="Blame" leadingIcon={PeopleIcon}>
Blame
</SegmentedControl.Button>
</SegmentedControl>
Icon-only segment guidlines
<SegmentedControl aria-label="File view">
<SegmentedControl.IconButton defaultSelected aria-label="Preview" icon={EyeIcon} />
<SegmentedControl.IconButton aria-label="Raw" icon={FileCodeIcon} />
<SegmentedControl.IconButton aria-label="Blame" icon={PeopleIcon} />
</SegmentedControl>
The previous examples are a curated subset of the full capabilities (such as reponsive behavior) of the SegmentedControl component. For more examples, see the SegmentedControl Storybook stories.
Loading data for segmented_control...