Spinner – Code

Implementation
Spinner Props

Common Examples

import { Spinner } from "@servicetitan/anvil2";

function ExampleComponent() {
  return <Spinner />;
}

Size variants

Spinners support three sizes: small, medium (default), and large.

import { Spinner } from "@servicetitan/anvil2";

function SizeExamples() {
  return (
    <>
      <Spinner size="small" />
      <Spinner size="medium" />
      <Spinner size="large" />
    </>
  );
}

Inheriting color

Use the inherit prop to make the Spinner inherit the current text color, useful when placing spinners inline with text or inside buttons.

import { Spinner, Button } from "@servicetitan/anvil2";

function InheritExample() {
  return (
    <Button disabled>
      <Spinner inherit />
      Loading...
    </Button>
  );
}

Custom sizing

Spinners can be sized using CSS width and height properties for cases where the preset sizes don’t fit your needs.

import { Spinner } from "@servicetitan/anvil2";

function CustomSizeExample() {
  return <Spinner style={{ width: 200, height: 200 }} />;
}

<Spinner
  size="medium"
  inherit={false}
/>

`Spinner` Props

In addition to the props listed below, the Spinner component can accept any valid HTML span props.

inherit

boolean

default:"false"

When true, the spinner inherits the current text color instead of using the default primary background color.

size

"small" | "medium" | "large"

default:"medium"

The size of the spinner.

​Common Examples

​Size variants

​Inheriting color

​Custom sizing

​Spinner Props

Common Examples

Size variants

Inheriting color

Custom sizing

`Spinner` Props