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'