Skip to main content

​
Common Examples

import { ButtonToggle } from "@servicetitan/anvil2";

function ExampleComponent() {
  return <ButtonToggle>Click to toggle</ButtonToggle>;
}

​
Button toggle sizes

Use the size prop to adjust the text size and padding of the button.

​
Controlling button toggles

​
Uncontrolled button toggles

By default, button toggles are uncontrolled. The checked state changes when the button is clicked. To make the button toggle checked by default, use the defaultChecked prop.

​
Controlled button toggles

To programmatically set the checked state of a button toggle, use the checked prop.

​
Handling state changes

The onChange prop accepts a function that passes the change event and current state object. This can be used to trigger other actions depending on the changed state.
() => {
  doSomething(state: ButtonToggleState) {
    console.log(`${state.value} is pressed: ${state.pressed}`)
  }
  return (
    <ButtonToggle onChange={(e, state) => doSomething(state)}>
      Toggle
    </ButtonToggle>
  )
}

​
React Accessibility

​
Icon-only button toggles

<ButtonToggle icon={Star} aria-label="Favorite" />
Do
Use aria-label or aria-labelledby for a button without any text.
<ButtonToggle icon={Star} />
Don’t
Provide only an icon for screen readers to read.For more guidance on button labels and accessibility, see button accessibility best practices.
Last modified on January 23, 2026