<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.
<State initial={2}>
{([state, setState]) => (
<ButtonToggle
value={state}
small
onChange={(value) => setState(value)}
options={[
{
text: "1",
value: 1,
},
{
text: "2",
value: 2,
},
]}
/>
)}
</State>
<State initial={2}>
{([state, setState]) => (
<ButtonToggle
value={state}
onChange={(value) => setState(value)}
options={[
{
text: "1",
value: 1,
},
{
text: "2",
value: 2,
},
]}
/>
)}
</State>
<State initial={2}>
{([state, setState]) => (
<ButtonToggle
value={state}
large
onChange={(value) => setState(value)}
options={[
{
text: "1",
value: 1,
},
{
text: "2",
value: 2,
},
]}
/>
)}
</State>
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",
},
]}
/>
Disabling individual options
<ButtonToggle
onChange={(value) => console.log("onChange", value)}
options={[
{
text: "Ongoing",
value: "Ongoing",
},
{
text: "One-Time",
value: "One-Time",
disabled: true,
},
{
text: "Never",
value: "Never",
disabled: true,
selected: true,
},
]}
/>
Icons
Button Toggles support the same icon options found in Buttons.
<Stack spacing={5} wrap="wrap">
<State initial={1}>
{([state, setState]) => (
<>
<ButtonToggle
className="d-if"
value={state}
onChange={(value) => setState(value)}
options={[
{
text: "Top",
iconName: "arrow_upward",
value: 1,
},
{
text: "Bottom",
iconName: "arrow_downward",
value: 2,
},
]}
/>
</>
)}
</State>
<State initial={2}>
{([state, setState]) => (
<ButtonToggle
className="d-if"
value={state}
onChange={(value) => setState(value)}
options={[
{
iconName: "view_week",
value: 1,
},
{
iconName: "view_module",
value: 2,
},
]}
/>
)}
</State>
</Stack>
Clearable
<State initial={2}>
{([state, setState]) => (
<ButtonToggle
clearable
value={state}
onChange={(value) => {
setState(value)
console.log("onChange", value)
}}
options={[
{
text: "1",
value: 1,
},
{
text: "2",
value: 2,
},
]}
/>
)}
</State>
Controlled
const ExampleLarge = () => {
const [state, setState] = React.useState(0)
const interval = React.useRef()
React.useEffect(() => {
interval.current = setInterval(() => {
setState((state) => (state === 1 ? 0 : 1))
}, 1000)
;() => clearInterval(interval.current)
}, [])
return (
<ButtonToggle
value={state}
onChange={(value) => {
clearTimeout(interval.current)
setState(value)
}}
options={[
{
text: "0",
value: 0,
},
{
text: "1",
value: 1,
},
]}
/>
)
}
render (ExampleLarge)
Content Guidelines
Give a descriptive, action-oriented label
The user relies on the button toggle label to provide context and identify how the options are related and what the choices control. Include a verb to prompt the user to take action.
Labels should follow the content guidelines for labels.
The user should be able to use the button name to predict what the option will do.
Each button should be given 1 to 3 word names that communicate their effect and are easy to understand. Users should have no doubt as to what they are choosing.
List buttons in a logical order to make it easier to understand the options.
Button toggles should follow the content guidelines for buttons.
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
- 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';
