;
}
};
```tsx lines expandable theme={null}
import { ButtonToggle, Flex } from "@servicetitan/anvil2";
import Star from "@servicetitan/anvil2/assets/icons/material/round/star.svg";
import Favorite from "@servicetitan/anvil2/assets/icons/material/round/favorite.svg";
import Bookmark from "@servicetitan/anvil2/assets/icons/material/round/bookmark.svg";
function App() {
return (
StarHeartBookmark
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { ButtonToggle } from "@servicetitan/anvil2";
function ExampleComponent() {
return Click to toggle;
}
```
### Button toggle sizes
Use the `size` prop to adjust the text size and padding of the button.
```tsx lines expandable theme={null}
import { ButtonToggle, Flex } from "@servicetitan/anvil2";
function App() {
return (
LargeMedium(Default)Small
);
}
export default App;
```
### Controlling button toggles
```tsx lines expandable theme={null}
import { ButtonToggle } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [isChecked, setIsChecked] = useState(true);
return (
setIsChecked((prev) => !prev)}
>
Click to Toggle
);
}
export default App;
```
#### 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.
```tsx lines expandable theme={null}
import { ButtonToggle } from "@servicetitan/anvil2";
function App() {
return Click to Toggle;
}
export default App;
```
#### 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.
```tsx theme={null}
() => {
doSomething(state: ButtonToggleState) {
console.log(`${state.value} is pressed: ${state.pressed}`)
}
return (
doSomething(state)}>
Toggle
)
}
```
## React Accessibility
### Icon-only button toggles
```tsx theme={null}
```
**Do**
Use aria-label or aria-labelledby for a button without any text.
```tsx theme={null}
```
**Don't**
Provide only an icon for screen readers to read.
For more guidance on button labels and accessibility, see [button accessibility best practices](/docs/accessibility/labels-and-ctas#buttons-and-links).
```tsx theme={null}
console.log(state)}
>
Click to toggle
```
## `ButtonToggle` Props
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.
