Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
Implementation
ButtonToggle Props
Common Examples
import { ButtonToggle } from "@servicetitan/anvil2";
function ExampleComponent() {
return <ButtonToggle>Click to toggle</ButtonToggle>;
}
size prop to adjust the text size and padding of the button.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.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
<ButtonToggle icon={Star} aria-label="Favorite" />
<ButtonToggle icon={Star} />
<ButtonToggle
checked={true}
defaultChecked={false}
disabled={false}
icon={StarIcon}
size="medium"
value="toggle-1"
onChange={(e, state) => console.log(state)}
>
Click to toggle
</ButtonToggle>
icon
Svg { before: Svg, after: Svg }
The SVGR library imports *.svg files as React components, so icon can
accept either a React component, or an object with before and/or after
keys to specify the placement of the icon.
onChange
(event, { pressed, value }) => void
size
"small" | "medium" | "large"
default:"medium"
