Segmented Control

A row of connected buttons that lets users switch between a small set of views or modes. Only one segment can be active at a time, controlled by value and onChange.

1<SegmentedControl value={view} onChange={setView}>
2  <SegmentedControl.Item value="list">List</SegmentedControl.Item>
3  <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>
4  <SegmentedControl.Item value="board">Board</SegmentedControl.Item>
5</SegmentedControl>
6

Usage

1import { SegmentedControl } from "atlas";
2
3<SegmentedControl value={view} onChange={setView}>
4  <SegmentedControl.Item value="list">List</SegmentedControl.Item>
5  <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>
6</SegmentedControl>
7

Examples

Default

The default SegmentedControl renders a row of connected segments with one active at a time.

1<SegmentedControl value={view} onChange={setView}>
2  <SegmentedControl.Item value="list">List</SegmentedControl.Item>
3  <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>
4  <SegmentedControl.Item value="board">Board</SegmentedControl.Item>
5</SegmentedControl>
6

Two options

Works just as well with two segments as with three or more. Each segment sizes to its content.

1<SegmentedControl value={size} onChange={setSize}>
2  <SegmentedControl.Item value="sm">Small</SegmentedControl.Item>
3  <SegmentedControl.Item value="md">Medium</SegmentedControl.Item>
4</SegmentedControl>
5

With icons

Pass an icon prop to render an icon before the label.

1<SegmentedControl value={mode} onChange={setMode}>
2  <SegmentedControl.Item value="preview" icon={<IconLayoutWindow />}>Preview</SegmentedControl.Item>
3  <SegmentedControl.Item value="code" icon={<IconCode />}>Code</SegmentedControl.Item>
4</SegmentedControl>
5

Disabled item

Set disabled on individual items to prevent specific segments from being selected.

1<SegmentedControl value={view} onChange={setView}>
2  <SegmentedControl.Item value="list">List</SegmentedControl.Item>
3  <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>
4  <SegmentedControl.Item value="board" disabled>Board</SegmentedControl.Item>
5</SegmentedControl>
6

API Reference

Prop	Type	Default
value	string	-
onChange	(value: string) => void	-
disabled	boolean	false