Skip to main content

​
Common Examples

import { Flex, Text } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Flex direction="column">
      <Text variant="headline" el="h2">
        Headline text
      </Text>
      <Text variant="eyebrow" size="large">
        Eyebrow
      </Text>
      <Text>Regular body text.</Text>
    </Flex>
  );
}

​
Text variants

The Text component accepts one of three options for the variant prop:
  • "body" (default): renders as HTML p or span element, if inline is set to true
  • "eyebrow": renders as HTML span element
  • "headline": renders as HTML heading element (h1 through h4) element, based on el prop

​
Body

​
Eyebrow

​
Headline

​
Nesting body text

When using body text within body text, make sure to use the inline prop on any of the child Body components to render a span instead of p.

​
Subdued body text

If subdued is set to true on a body text, it will use a de-emphasized color:

​
The useAccessibleColor hook

The Anvil2 useAccessibleColor hook makes it easy to determine which text color to use given a specific background color without making it inaccessible. This hook accepts two parameters, and returns an object with both foreground and background colors. In the case that no color can be made accessible with the given color, the background color will be adjusted until it can.
// accepts any valid css color format and hex with no #
const { foreground, background } = useAccessibleColor("0066CC");
Note: Anvil2 components and tokens already account for accessible colors internally, so this hook should only be needed when working with custom colors.
Last modified on April 14, 2026