Skip to main content

​
Common Examples

import { Button, ButtonCompound, ButtonLink, Card } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <>
      <Button onClick={console.log}>Click me</Button>
      <ButtonCompound onClick={console.log}>
        <Card>Click me</Card>
      </ButtonCompound>
      <ButtonLink href="#">Click me</ButtonLink>
    </>
  );
}
The Button component can be used in the same way that you would use an HTML button element, while the ButtonLink component can be used in the same way that you would use an HTML a element.

​
Form Submit

The type prop can be used to alter the default functionality of the button. A common use case is to use type="submit" in order to submit the content of a form.
<form onSubmit={handleSubmit}>
  <TextInput name="firstName" label="First Name" required />
  <Button type="submit">Submit</Button>
</form>
In general, Links should be used for navigating to other pages or website. To create a link that is styled like a button, use the ButtonLink component.
<div>
  <div>
    <BodyText>
      A project label can be attached to expense items like timesheet activities
      to provide a visual representation of expense spending.
    </BodyText>
    <br />
    <br />
    <ButtonLink href="#">Learn more</ButtonLink>
  </div>
</div>

​
Using button compounds to make components interactive

To add interactivity to components that are usually static, such as avatars, use the ButtonCompound component.
<ButtonCompound shape="circular" onClick={handleClick}>
  <Avatar {...avatarProps} />
</ButtonCompound>

​
Interactive cards

To make cards clickable, use the InteractiveCard component. It supports nested interactive elements without accessibility violations.

​
AI Mark

Use the aiMark prop to display an AI indicator. aiMark accepts a boolean, or one of:
  • "mark"
  • "chat"
  • "edit"
  • "form"
  • "mic"
  • "search"
The aiMark prop cannot be used together with a before icon (a single icon Svg or icon={{ before: Svg }}).
Button usageaiMarkicon allowed?
With childrentrue or an AI icon nameOnly after: use icon={{ after: Svg }} or omit icon. You cannot use a before icon or a single icon Svg.
Icon-only (no children)true or an AI icon nameNo. Do not pass icon. Only the AI icon is shown. Always provide aria-label.
With children:
<Button appearance="primary" aiMark>Generate</Button>
<Button appearance="secondary" aiMark icon={{ after: ArrowForward }}>Report</Button>
Icon-only AI:
<Button aria-label="AI action" aiMark />
<Button aria-label="AI chat" aiMark="chat" />

​
Minimum width for buttons

If a Button component has any children, it will have a 5rem minimum width. This is not applied in icon-only buttons using the icon prop. In some cases, such as when adding a Badge as a child of a Button component without any text, this can lead to unexpected width changes.Either override the width and minWidth of the Button component, or make the Badge a sibling of the Button inside of a div with relative positioning.
// option 1
<Button
  aria-label="filters button"
  icon={FilterIcon}
  style={{ width: '2rem', minWidth: '2rem' }}
>
  <Badge aria-label="2 active filters">2</Badge>
</Button>

// option 2
<div style={{ position: 'relative', display: 'inline-block '}}>
  <Button aria-label="filters button" icon={FilterIcon} />
  <Badge aria-label="2 active filters">2</Badge>
</div>

​
React Accessibility

​
Icon-only buttons

<Button icon={Edit} aria-label="Edit" />
Do
Use aria-label or aria-labelledby for a button without any text.
<Button icon={Edit} />
Don’t
Provide only an icon for screen readers to read.For more guidance on button labels and accessibility, see button accessibility best practices.
Last modified on April 14, 2026