## Feature Examples ### Structure - description:

Use the SegmentedToggle to wrap a set of related options. It should be used to present two to five options.

- example: ```jsx Option 1 Option 2 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 4 ; ``` ### Child items - description:

Each button should be set as a child item of the component.

  • Use for text labels.
  • Use when short on space, or when there’s enough context to make the option distinguishable only using icons.
    • - example: ```jsx Option 1 Option 2 ; ``` ### Size - description:

    Adjust the size of the component with the size property.

  • Use medium as the default in all forms, card or page layouts.
  • Use small in compact environments or other dense layouts.
    • - example: ```jsx Medium Medium Small Small ; ``` ### Prefix icon - description:

    Add an icon next to the option label using to make it easier to scan.

    - example: ```jsx } value="option1"> Option 1 } value="option2"> Option 2 ; ``` ### Disabled options - description:

    Disable buttons with the disabled prop. Use it to disable the whole composite.

    - example: ```jsx Option Option ; ``` ## Developer Examples ### Selection control - description:

    The component value can be controlled manually using the selected prop.

    - example: ```jsx () => { const [selectedValue, setSelectedValue] = React.useState('option1'); const onClick = (_, value) => setSelectedValue(value); return ( ); }; ``` ## Common Use Case Examples ### Settings panel - description:

    Use a segmented toggle to let users control element settings.

    - example: ```jsx () => { const [value, setValue] = React.useState(''); return ( setValue(e.target.value)} /> Expand Link ); }; ``` ### Switch between views - description:

    Use segmented toggles to let users switch between different layouts, such as between a grid or a list view.

    - example: ```jsx () => { const VIEW_TYPE = { listView: 'listView', tileView: 'tileView', }; const [viewType, setViewType] = React.useState(VIEW_TYPE.listView); const changeViewType = (_, value) => setViewType(value); const ActionsCell = ( {}, }} secondaryActions={[ { text: 'Move', icon: , onClick: () => {}, }, { text: 'Mark as sold out', icon: , onClick: () => {}, }, { text: 'Hide', icon: , onClick: () => {}, }, { text: 'Archive', icon: , onClick: () => {}, }, ]} numOfVisibleSecondaryActions={0} /> ); const ListView = () => [ , width: '90px', }, { value: French toast }, { value: $8.00 }, { value: ActionsCell, }, ]} />, , width: '90px', }, { value: House pasta }, { value: $27.00 }, { value: ActionsCell, }, ]} />, , width: '90px', }, { value: Paella }, { value: $18.00 }, { value: ActionsCell, }, ]} />, ]; const Tile = ({ media, title }) => ( {title} ); const TileView = () => ( ); return ( } /> {viewType === VIEW_TYPE.listView ? : } ); }; ``` ### Status toggle - description:

    Use segmented toggles to let users control an item's status.

    - example: ```jsx () => { const [registrationOrigin, setRegistrationOrigin] = React.useState(1); return ( On my Wix Events registration page On a different page or website Guest don't need to register } value="option1" > Open } value="option2" > Closed ); }; ```