Button – Code – React Native

Implementation
Button Props

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.

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.

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

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

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.

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

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

string

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

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.

boolean

default:"false"

Disables press and applies the disabled treatment.

(event: GestureResponderEvent) => void

Press handler.

"medium" | "small" | "xsmall"

default:"medium"

Target size.

string

Test hook forwarded to the underlying Pressable.

"primary" | "secondary" | "ghost" | "danger"

default:"primary"

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

​Common Examples

​Variants

​Sizes

​Icons

​Disabled

​Accessibility

​Button Props

Common Examples

Variants

Sizes

Icons

Disabled

Accessibility

`Button` Props