> ## 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.

# Button – Code

> The Button provides interactive actions with variants, sizes, and icon configurations.

<Tabs>
  <Tab title="Implementation">
    ```tsx theme={null}
    import { Button } from "@servicetitan/anvil2-rn";
    import { IconPlus } from "@servicetitan/anvil2-icons/react-native";

    function App() {
      return (
        <Button
          variant="primary"
          size="medium"
          label="Add item"
          icon={{ icon: <IconPlus />, position: "left" }}
          onPress={() => {}}
        />
      );
    }
    ```

    ## Common Examples

    To use the `Button`, import it from `@servicetitan/anvil2-rn` and pass a required `label`. The kit forbids `children`; all content flows through typed props.

    ```tsx theme={null}
    import { Button } from "@servicetitan/anvil2-rn";

    function ExampleComponent() {
      return <Button label="Save" onPress={() => {}} />;
    }
    ```

    ### Variants

    The `variant` prop sets visual intent. Use `"primary"` for the main action, `"secondary"` for supporting actions, `"ghost"` for low-emphasis actions, and `"danger"` for destructive work.

    ```tsx theme={null}
    <Button label="Primary" variant="primary" />
    <Button label="Secondary" variant="secondary" />
    <Button label="Ghost" variant="ghost" />
    <Button label="Danger" variant="danger" />
    ```

    ### Sizes

    The `size` prop sets the target size. `"medium"` is the default.

    ```tsx theme={null}
    <Button label="Extra Small" size="xsmall" variant="secondary" />
    <Button label="Small" size="small" variant="secondary" />
    <Button label="Medium" size="medium" variant="secondary" />
    ```

    ### Icons

    Pass a bare icon element for an icon-only button. Pair `{ icon, position }` with the visible `label` to place an icon before or after the text. Import icons from `@servicetitan/anvil2-icons/react-native`.

    ```tsx theme={null}
    import { Button } from "@servicetitan/anvil2-rn";
    import {
      IconChevronRight,
      IconPencil,
      IconPlus,
    } from "@servicetitan/anvil2-icons/react-native";

    <Button
      label="Add item"
      variant="secondary"
      icon={{ icon: <IconPlus />, position: "left" }}
    />
    <Button
      label="Continue"
      variant="secondary"
      icon={{ icon: <IconChevronRight />, position: "right" }}
    />
    <Button label="Edit" variant="secondary" icon={<IconPencil />} />
    ```

    Icon-only buttons apply `label` as `accessibilityLabel`.

    ### Disabled

    Set `isDisabled` to prevent press and apply the disabled treatment.

    ```tsx theme={null}
    <Button label="Save" variant="primary" isDisabled />
    ```

    ## Accessibility

    * Every `Button` requires a `label`, which is always the accessible name.
    * Icon-only buttons expose that name through `accessibilityLabel`.
    * Disabled buttons set `accessibilityState.disabled` and do not fire `onPress`.
    * The control uses `accessibilityRole="button"`.
  </Tab>

  <Tab title="Button Props">
    ```tsx theme={null}
    <Button
      label="Save"
      variant="primary"
      size="medium"
      icon={{ icon: <IconPlus />, position: "left" }}
      isDisabled={false}
      onPress={() => {}}
    />
    ```

    ## `Button` Props

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

    <ParamField path="label" type="string" required>
      Required accessible name. Becomes visible text when the button shows a
      label, and becomes the `accessibilityLabel` for icon-only buttons. Pass a
      short imperative such as `"Save"` or `"Open settings"`.
    </ParamField>

    <ParamField path="analyticsId" type="string">
      Opt-in telemetry id. When set under `Anvil2RNTelemetryProvider`, a press
      emits a `press` event before `onPress`.
    </ParamField>

    <ParamField path="icon" type={`IconElement | { icon: IconElement; position: "left" | "right" }`}>
      Optional icon. A bare `IconElement` renders an icon-only button. The
      object form pairs the icon with the visible `label`.
    </ParamField>

    <ParamField path="isDisabled" type="boolean" default="false">
      Disables press and applies the disabled treatment.
    </ParamField>

    <ParamField path="onPress" type="(event: GestureResponderEvent) => void">
      Press handler.
    </ParamField>

    <ParamField path="size" type={`"medium" | "small" | "xsmall"`} default="medium">
      Target size.
    </ParamField>

    <ParamField path="testID" type="string">
      Test hook forwarded to the underlying `Pressable`.
    </ParamField>

    <ParamField path="variant" type={`"primary" | "secondary" | "ghost" | "danger"`} default="primary">
      Visual intent. Use `"primary"` for the main action and `"danger"` for
      destructive work.
    </ParamField>
  </Tab>
</Tabs>