Skip to main content

​
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 }} />;
}
Last modified on January 23, 2026