Button - Web (AI Kit)

For development, import Button from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

Options

The Button supports variants, sizes, and icon configurations to fit different action hierarchies.

Variants

Variant	When to use
Primary	The main action in a view. Prefer one primary action in the same context
Secondary	Supporting actions that sit alongside or below a primary action
Ghost	Low-emphasis actions, including many icon-only controls
Danger	Destructive or irreversible actions that need clear caution

Sizes

Size	Typical use
Medium	Default size for most product actions
Small	Dense layouts where space is limited
Xsmall	Compact desktop UI. On touch devices, the tap target is promoted to meet accessibility guidance

Icons

Icons can sit before or after the label, or replace the label entirely. Icon-only buttons keep a short label for accessibility and show that label in a tooltip on hover and focus.

Behavior

The Button responds to pointer, touch, and keyboard interaction with clear resting, hover, pressed, focused, and disabled states.

Visual States

Hover and press update the surface to confirm the control is interactive. Keyboard focus shows a visible focus ring. Disabled buttons remain in the tab order where appropriate but do not activate.

Icon-only labeling

Icon-only buttons always carry a required label. That label becomes the accessible name and the tooltip content so pointer and assistive-technology users share the same affordance name.

Usage Guidelines

When to Use

Use the Button when:

Triggering an action – A user needs to run a command or event, such as adding or editing an item.
Marking the main action – One action leads the view. Use the primary variant, and prefer one primary action in the same context.
Confirming a destructive action – The action deletes data or can’t be undone. Use the danger variant so the caution is clear.
Compact icon controls – Space is tight and an icon communicates the action. Use an icon-only Button with a short label, which also appears as its tooltip.

When not to use

Avoid using the Button for:

Navigating to another page or location – Use the Link instead.
Holding a persistent on/off state – Use the Button Toggle instead.
Offering follow-up prompts after an agent response – Use the Suggestion instead.

Keyboard Interaction

Users can activate the Button using standard keyboard controls.

Key	Description
Tab	Moves focus to the button
Enter / Space	Activates the focused button

Accessibility

Every Button requires a label so it always has an accessible name. Icon-only buttons expose that label through aria-label and a presentational tooltip so the name is not announced twice. Prefer press handlers that work for click, touch, and keyboard activation together.

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.

Concepts & Guidelines

Anvil2

Resources

Button - Web (AI Kit)

Options

Variants

Sizes

Icons

Behavior

Visual States

Icon-only labeling

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Accessibility

Code

Common Examples

Variants

Sizes

Icons

Disabled

Press handling

React Accessibility

`Button` Props

​Options

​Variants

​Sizes

​Icons

​Behavior

​Visual States

​Icon-only labeling

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Accessibility

​Code

​Common Examples

​Variants

​Sizes

​Icons

​Disabled

​Press handling

​React Accessibility

​Button Props

Options

Variants

Sizes

Icons

Behavior

Visual States

Icon-only labeling

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Accessibility

Code

Common Examples

Variants

Sizes

Icons

Disabled

Press handling

React Accessibility

`Button` Props