Chip – Tokens

Chip tokens control the appearance of the Chip component in its background, border, foreground, focus-ring, close, default, info, success, warning, danger, in-progress, table-entity, brown, lime, magenta, mauve, orange, and purple variants.

Tokens

How to override

Use ThemeProvider to override component tokens for a subtree:

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

<ThemeProvider
  theme={{
    component: {
      ChipBackgroundColor: {
        value: "#ff0055",
        extensions: { appearance: { dark: { value: "#ff6688" } } },
      },
    },
  }}
>
  {/* children */}
</ThemeProvider>;

Where a token has -hover, -active, or -disabled variants, they 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, chip.background.color has siblings chip.background.color-hover and ...color-active. The table above surfaces these via the State column.

Last modified on October 27, 2026

⌘I