Skip to main content

Documentation Index

Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt

Use this file to discover all available pages before exploring further.

Segmented Control tokens control the appearance of the Segmented Control component in its background, segment, button, border, shadow, and focus-ring variants.

​
Tokens

​
How to override

Use ThemeProvider to override component tokens for a subtree: 
import { ThemeProvider } from "@servicetitan/anvil2";

<ThemeProvider
  theme={{
    component: {
      SegmentedControlBackgroundColor: {
        value: "#ff0055",
        extensions: { appearance: { dark: { value: "#ff6688" } } },
      },
    },
  }}
>
  {/* children */}
</ThemeProvider>;
The -hover, -active, and -disabled variants of any token can be overridden the same way. To theme every component at once, override tier-2 semantic tokens instead — see Design Tokens.

​
Interactive states

Interactive state tokens follow a -hover / -active / -disabled suffix on the base token name. For example, segmented-control.primary.background.color has siblings segmented-control.primary.background.color-hover, ...color-active, and ...color-disabled. The table above surfaces these via the State column.
Last modified on May 4, 2026