<ButtonToggle
    onChange={(value) => console.log('onChange', value)}
    options={[
        {
            text: 'Ongoing',
            value: 'Ongoing',
            selected: true
        },
        {
            text: 'One-Time',
            value: 'One-Time'
        },
        {
            text: 'Never',
            value: 'Never'
        }
    ]}
/>

Small & Large Variation

Just like our Buttons, we can change size of our Button Toggle.

const ExampleSmall = () => {
    const [state, setState] = React.useState(2)
    return (
        <ButtonToggle
            value={state}
            small
            onChange={(value) => setState(value)}
            options={[
                {
                    text: '1',
                    value: 1
                },
                {
                    text: '2',
                    value: 2
                }
            ]}
        />
    )
}
render (ExampleSmall)
const ExampleRegular = () => {
    const [state, setState] = React.useState(2)
    return (
        <ButtonToggle
            value={state}
            onChange={(value) => setState(value)}
            options={[
                {
                    text: '1',
                    value: 1
                },
                {
                    text: '2',
                    value: 2
                }
            ]}
        />
    )
}
render (ExampleRegular)
const ExampleLarge = () => {
    const [state, setState] = React.useState(2)
    return (
        <ButtonToggle
            value={state}
            large
            onChange={(value) => setState(value)}
            options={[
                {
                    text: '1',
                    value: 1
                },
                {
                    text: '2',
                    value: 2
                }
            ]}
        />
    )
}
render (ExampleLarge)

Color Options

We have three states of Button Toggles just like Buttons.

<ButtonToggle
    onChange={(value) => console.log('onChange', value)}
    options={[
        {
            text: 'On',
            value: 'on',
            selected: true
        },
        {
            text: 'Off',
            value: 'off'
        }
    ]}
/>
<ButtonToggle
    color="neutral"
    onChange={(value) => console.log('onChange', value)}
    options={[
        {
            text: 'On',
            value: 'on',
            selected: true
        },
        {
            text: 'Off',
            value: 'off'
        }
    ]}
/>
<ButtonToggle
    color="negative"
    onChange={(value) => console.log('onChange', value)}
    options={[
        {
            text: 'On',
            value: 'on',
            selected: true
        },
        {
            text: 'Off',
            value: 'off'
        }
    ]}
/>

Disabled State

The disabled state should not show any option selected.

<ButtonToggle
    disabled
    onChange={(value) => console.log('onChange', value)}
    options={[
        {
            text: 'Active',
            value: 'active',
            selected: true
        },
        {
            text: 'Inactive',
            value: 'inactive'
        }
    ]}
/>

Clearable

<ButtonToggle
    clearable
    onChange={(value) => console.log('onChange', value)}
    options={[
        {
            text: '1',
            value: 1
        },
        {
            text: '2',
            value: 2
        }
    ]}
/>
const ClearableExample02 = () => {
    const [state, setState] = React.useState(2)
    return (
        <ButtonToggle
            clearable
            value={state}
            onChange={(value) => setState(value)}
            options={[
                {
                    text: '1',
                    value: 1,
                    selected: true
                },
                {
                    text: '2',
                    value: 2
                }
            ]}
        />
    )
}
render (ClearableExample02)

Best Practices

A Button Toggle should:

  • Group together actions that are related
  • Have between 2 and 5 actions to choose between
  • Limit action names to one or two short words

Related Components

  • For an individual button, use a Button.
  • For a group of buttons that don't need the ability to toggle, use a Button Group.
  • For longer labels or more items, use a list of Radios.

Importing

We recommend using the Form shorthand component <Form.ButtonToggle />. It automatically provide the correct Form grouping structure and spacing. You can import the standalone component for custom Form layouts.

import { ButtonToggle } from '@servicetitan/design-system';