Segment Picker

function Example() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', width: '500px' }}>
      <SegmentPicker defaultValue="calendar">
        <SegmentPicker.Item value="calendar">
          <Calendar /> Calendar
        </SegmentPicker.Item>
        <SegmentPicker.Item value="contacts">
          <AddressBook /> Contacts
        </SegmentPicker.Item>
      </SegmentPicker>
    </div>
  );
}

Props

children

required

TypeReactElement<SegmentPickerItemProps>[]

shape

Type'' | 'circle'

Default''

Controls the shape of the SegmentPicker and its items. Only supported when items contain icons only.

size

Type'xxx-small' | 'xx-small' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'

Default'medium'

onChange

Type(event: MouseEventHandler<HTMLButtonElement>, value: string) => void

value

Type'string' | 'never'

The currently selected value (controlled mode). Must not be used in controlled mode.

defaultValue

Type'string' | 'never'

The initial selected value (uncontrolled mode). Must not be used in uncontrolled mode

CSS Variables

Color

--ax-public-segment-picker-background-color

Radius

--ax-public-segment-picker-circle-border-radius

--ax-public-segment-picker-border-radius-extra-large

--ax-public-segment-picker-border-radius-extra-small

--ax-public-segment-picker-border-radius-large

--ax-public-segment-picker-border-radius-medium

--ax-public-segment-picker-border-radius-small

--ax-public-segment-picker-border-radius-xx-small

--ax-public-segment-picker-border-radius-xxx-small

Spacing

--ax-public-segment-picker-gap

--ax-public-segment-picker-padding