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 and cards, use the ButtonCompound component.
<ButtonCompound shape="circular" onClick={handleClick}>
  <Avatar {...avatarProps} />
</ButtonCompound>

​
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 January 23, 2026