Segmented controls

A segmented control is a linear set of two or more segments, each of which functions as a button.

Scales

Use scale property to change the size of the segmented controls.

sm
md
lg

import { SegmentedControl } from 'swash/controls/SegmentedControl';

() => (
  <SegmentedControl value="two" scale="lg" onChange={(value) => console.log(value)}>
    <Button id="one">
      <IoNewspaper /> One
    </Button>
    <Tooltip tooltip="Two">
    <Button id="two">
      <IoBookmark /> Two
    </Button>
    </Tooltip>
    <Button>
      <IoAccessibility /> Three
    </Button>
  </SegmentedControl>
);

Provide value property to set the selected control, and onChange to handle the change.

With icon

Set buttons with icons using iconOnly property.

sm
md
lg

import { SegmentedControl } from 'swash/controls/SegmentedControl';

() => (
  <SegmentedControl
    value={2}
    scale={scale}
    onChange={(value) => console.log(value)}
  >
    <Button id="one" iconOnly>
      <IoNewspaper />
    </Button>
    <Tooltip tooltip="Two">
      <Button id="two" iconOnly>
        <IoBookmark />
      </Button>
    </Tooltip>
    <Button iconOnly>
      <IoAccessibility />
    </Button>
  </SegmentedControl>
);

With tooltip

Surround Button component with Tooltip to show tooltip on hover.

import { SegmentedControl } from 'swash/controls/SegmentedControl';

() => (
  <SegmentedControl onChange={(value) => console.log(value)}>
    <Tooltip tooltip="One">
      <Button id="one">
        <IoNewspaper /> One
      </Button>
    </Tooltip>
    <Tooltip tooltip="Two">
      <Button id="two">
        <IoBookmark /> Two
      </Button>
    </Tooltip>
    <Tooltip tooltip="Three">
      <Button>
        <IoAccessibility /> Three
      </Button>
    </Tooltip>
  </SegmentedControl>
);