Button Toggle – Code – React Native

Implementation
ButtonToggle Props

import { useState } from "react";
import { IconPencil } from "@servicetitan/anvil2-icons/react-native";
import { ButtonToggle } from "@servicetitan/anvil2-rn";

function App() {
  const [selected, setSelected] = useState(false);

  return (
    <ButtonToggle
      label="Edit mode"
      icon={<IconPencil />}
      isSelected={selected}
      onChange={setSelected}
    />
  );
}

Common Examples

To use the ButtonToggle, pass a required label and control selection with isSelected and onChange. Use defaultSelected instead for uncontrolled selection. The kit forbids children.

<ButtonToggle
  label="Bold"
  isSelected={bold}
  onChange={setBold}
  icon={<IconBold />}
/>

A bare icon creates an icon-only toggle. label becomes its accessible name. Use { icon, position } to show the label beside the icon.

<ButtonToggle
  label="Edit mode"
  icon={{ icon: <IconPencil />, position: "left" }}
  isSelected={selected}
  onChange={setSelected}
/>

size is "medium", "small", or "xsmall".

Accessibility

The control uses accessibilityRole="togglebutton" and accessibilityState.checked for the selected state.
label is always required, including for icon-only toggles, and is set as accessibilityLabel.
Use a short imperative label such as “Bold” or “List view.”

<ButtonToggle
  label="Bold"
  isSelected={bold}
  onChange={setBold}
  icon={<IconBold />}
/>

`ButtonToggle` Props

The ButtonToggle accepts the following props. It does not forward remaining React Native Pressable props.

string

required

Visible label, or the accessible name for an icon-only toggle.

string

Opt-in telemetry id. When set under Anvil2RNTelemetryProvider, a press emits a press event with meta.selected (the state the press produced) before onChange.

boolean

default:"false"

Initial selection for uncontrolled use. Ignored when isSelected is set.

IconElement | { icon: IconElement; position: "left" | "right" }

Bare icon for an icon-only toggle, or { icon, position } for an icon paired with the visible label.

boolean

default:"false"

Disables the toggle.

boolean

Controlled selected state.

(isSelected: boolean) => void

Fired when selection changes.

"medium" | "small" | "xsmall"

default:"medium"

Target size.

string

Test hook forwarded to the underlying Pressable.

​Common Examples

​Accessibility

​ButtonToggle Props

Common Examples

Accessibility

`ButtonToggle` Props