Skip to main content

Item

A single item in the SegmentPicker, rendered as a NavButton under the hood. Automatically receives size and shape from SegmentPicker context. Must be used only within a SegmentPicker component. Determines which NavButton variant to render based on its children (label only, icon only, or icon + label).

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
Type'string' | 'ReactElement' | '[ReactElement, string]' | '[string, ReactElement]' | '[ReactElement, string, ReactElement]'

value

required
Typestring

tooltip

Typestring

tooltipType

Type'default' | 'blue'