Text - Web

For development, import Text from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Options

Text supports body text, headline, and eyebrow configurations with multiple sizing options to accommodate various typography scenarios.

Body Text

Body Text sizing

Value	Size
Small	0.875rem / 14px
Medium (Default)	1rem / 16px
Large	1.25rem / 20px
Extra Large	1.5rem / 24px

Styling

Headline

Headline sizing

Value	Size
Small	1rem / 16px
Medium (Default)	1.25rem / 20px
Large	1.5rem / 24px
Extra Large	2rem / 32px

Eyebrow

Eyebrow sizing

Value	Size
Small	0.625rem / 10px
Medium (Default)	0.75rem / 12px
Large	1rem / 16px

Behavior

Text responds to different style and size requirements while maintaining consistent typography.

Usage Guidelines

Standard	Requirement
DoConvey text throughout a page	The text component should be regularly used to convey text throughout a page. Each of the major text styles used in the design system are options within Text.
DoFollow typography foundations	Refer to the typography foundations for suggested type pairing and size configurations.
DoApply heading levels to headline text	The headline variant of Text should apply an appropriate HTML section heading (e.g., `h1`, `h2`). This value is independent of the size option applied to headlines. Inside a Page, PageHeader already renders the `h1`, so body headlines start at `h2`.
DoLeave size off section headings	Omit `size` on section titles so they read as titles (default). Reserve `size="small"` for the deepest sub-labels.
Don’tUse in most components	Text is not directly used in most components. In those cases, the built-in type opinions of the component are used instead.

Content

Content within Text should follow typography best practices for readability and hierarchy.

Accessibility

Out of the box, text provides necessary accessibility around sizing and color contrast.

Text color contrast with backgrounds

Text should follow the WCAG AA guidance on color contrast. By default, Anvil’s Text will provide at least 4.5:1 contrast with a white background. Use caution when using subdued on other background values, or when using custom color values in general, as they may not meet contrast guidance. For more guidance on text hierarchy and semantic markup, see semantic markup best practices.

Code

Implementation
Text Props

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

Headlines without a bottom margin

Headlines carry a bottom margin so they space correctly above the content that follows. When a headline is aligned against a sibling element instead, that trailing margin shifts it off center. Set noMargin to drop it:

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.

<Text variant="body" size="medium" inline={false} subdued={false} el="h2">
  Text content
</Text>

`Text` Props

Depending on the variant, the Text component can accept any valid HTML header, p, or span props, in addition to the ones listed below. See the Text variants section for specifics.

"h1" | "h2" | "h3" | "h4" | "h5" | "h6"

Only valid when variant="headline". Required when using headline variant.

boolean | AiMarkWithTooltipOrPopoverConfig

Only valid when variant="headline". When set, renders the AI mark inline after the headline text. Use true for the sparkle only, or pass tooltip or popover configuration. See AI Mark.

boolean

Only valid when variant="body".

boolean

default:"false"

Only valid when variant="headline". Removes the headline’s bottom margin so its layout box hugs the text. Use it when a headline sits alongside a sibling element, such as a Chip, where the trailing margin would offset the alignment. The body and eyebrow variants have no margins, so they do not need it.

"small" | "medium" | "large" | "xlarge"

default:"medium"

Note: "xlarge" is not available for variant="eyebrow".

boolean

Only valid when variant="body".

"body" | "eyebrow" | "headline"

default:"body"

Concepts & Guidelines

Anvil2

Resources

Text - Web

Options

Body Text

Body Text sizing

Styling

Headline

Headline sizing

Eyebrow

Eyebrow sizing

Behavior

Usage Guidelines

Content

Accessibility

Text color contrast with backgrounds

Code

Common Examples

Text variants

Body

Eyebrow

Headline

Headlines without a bottom margin

Nesting body text

Subdued body text

The useAccessibleColor hook

`Text` Props

​Options

​Body Text

​Body Text sizing

​Styling

​Headline

​Headline sizing

​Eyebrow

​Eyebrow sizing

​Behavior

​Usage Guidelines

​Content

​Accessibility

​Text color contrast with backgrounds

​Code

​Common Examples

​Text variants

​Body

​Eyebrow

​Headline

​Headlines without a bottom margin

​Nesting body text

​Subdued body text

​The useAccessibleColor hook

​Text Props

Options

Body Text

Body Text sizing

Styling

Headline

Headline sizing

Eyebrow

Eyebrow sizing

Behavior

Usage Guidelines

Content

Accessibility

Text color contrast with backgrounds

Code

Common Examples

Text variants

Body

Eyebrow

Headline

Headlines without a bottom margin

Nesting body text

Subdued body text

The useAccessibleColor hook

`Text` Props