Button Toggles support the same icon options found in Buttons.
<Stackspacing={5}wrap="wrap">
<Stateinitial={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>
<Stateinitial={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
<Stateinitial={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
constExampleLarge=()=>{
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.
Do
Don't
Button name should describe the option
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.
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.
