> ## 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 - React Native

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

> [!NOTE]
>
> For development, import `Button` from
> `@servicetitan/anvil2-rn`. For design, find it in the
> [Mobile Agentic Component Library file](https://www.figma.com/design/gjGWnAOnI1kukfzjsUQ6dP/Mobile-Agentic-Component-Library).

**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"`.

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

**label** `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"`.

**analyticsId** `string`

Opt-in telemetry id. When set under `Anvil2RNTelemetryProvider`, a press
emits a `press` event before `onPress`.

**icon** `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`.

**isDisabled** `boolean` (default: false)

Disables press and applies the disabled treatment.

**onPress** `(event: GestureResponderEvent) =\> void`

Press handler.

**size** `"medium" | "small" | "xsmall"` (default: medium)

Target size.

**testID** `string`

Test hook forwarded to the underlying `Pressable`.

**variant** `"primary" | "secondary" | "ghost" | "danger"` (default: primary)

Visual intent. Use `"primary"` for the main action and `"danger"` for
destructive work.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.