Button – Code

Implementation
Button Props

Common Examples

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

import { Button } from "@servicetitan/anvil2-ai-kit";

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.

Sizes

The size prop sets the target size. "medium" is the default. On touch devices, "xsmall" promotes to a 40×40 minimum so the tap target meets WCAG 2.5.5 guidance.

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.Icon-only buttons apply label as aria-label and show it in a presentational tooltip, so pointer and assistive-technology users share the same name.

Disabled

Set isDisabled to prevent press and hover while keeping the control focusable for keyboard users.

Press handling

Prefer onPress over onClick. onPress fires for click, touch, and Space/Enter, matching React Aria’s press semantics.

<Button label="Save" onPress={() => save()} />

React Accessibility

Every Button requires a label, which is always the accessible name.
Icon-only buttons expose that name through aria-label and a presentational tooltip so screen readers do not announce the name twice.
Disabled buttons remain in the tab order. They do not activate.
Users activate a focused button with Enter or Space.

<Button
  label="Save"
  variant="primary"
  size="medium"
  icon={{ icon: <IconPlus />, position: "left" }}
  isDisabled={false}
  onPress={() => {}}
/>

`Button` Props

The Button accepts the following props. It also forwards remaining React Aria Button props except children, className, style, and isPending.

string

required

Required accessible name. Becomes visible text when the button shows a label, and becomes the aria-label plus tooltip content for icon-only buttons. Pass a short imperative such as "Save" or "Open settings".

string

Caller-supplied class name merged onto the button’s recipe class.

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 hover. The control remains focusable for keyboard users.

(e: PressEvent) => void

Press handler that fires for click, touch, and Space/Enter. Prefer this over onClick for keyboard and touch parity.

"medium" | "small" | "xsmall"

default:"medium"

Target size. On touch devices, "xsmall" is promoted to a 40×40 minimum.

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

default:"primary"

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

AI Kit

Agent Experience

Button – Code

Common Examples

Variants

Sizes

Icons

Disabled

Press handling

React Accessibility

`Button` Props

​Common Examples

​Variants

​Sizes

​Icons

​Disabled

​Press handling

​React Accessibility

​Button Props

Common Examples

Variants

Sizes

Icons

Disabled

Press handling

React Accessibility

`Button` Props