Alert – Tokens

Alert tokens control the appearance of the Alert component in its info, success, warning, danger, and close-button variants.

Tokens

Nested component tokens

Alert includes internal components that bring their own tokens. Override these on the Alert /tokens page or globally via the semantic layer.

Status Icon

How to override

Use ThemeProvider to override component tokens for a subtree:

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

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

To theme every component at once, override tier-2 semantic tokens instead — see Design Tokens.

Last modified on October 27, 2026

⌘I