> ## 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.

# Text - React Native

> The Text component renders Carto typography through variant, size, and a named text prop.

> [!NOTE]
>
> For development, import `Text` from
> `@servicetitan/anvil2-rn`. For design, find it in the
> [Mobile Agentic Component Library file](https://www.figma.com/design/gjGWnAOnI1kukfzjsUQ6dP/Mobile-Agentic-Component-Library).

**Implementation**

```tsx theme={null}
import { Text } from "@servicetitan/anvil2-rn";

function App() {
  return <Text text="The quick brown fox jumps over the lazy dog." />;
}
```

## Common Examples

To use the `Text`, import it from `@servicetitan/anvil2-rn` and pass a required `text` prop. The kit forbids `children`. All variants render a native `Text`; nested `Text` stays inline.

```tsx theme={null}
import { Text } from "@servicetitan/anvil2-rn";

function ExampleComponent() {
  return <Text text="Default body paragraph." />;
}
```

React Native has no CSS color inheritance, so `color` selects a semantic foreground role. `align` sets horizontal alignment for multi-line copy.

### Headline

Set `variant="headline"` and a required `el` (`"h1"`–`"h6"`) so the semantic level is independent of visual size. Headline `size` defaults to `"major"`.

```tsx theme={null}
<Text variant="headline" el="h2" size="hero" text="Headline — hero" />
<Text variant="headline" el="h2" size="major" text="Headline — major" />
<Text
  variant="headline"
  el="h2"
  size="substantial"
  text="Headline — substantial"
/>
<Text variant="headline" el="h2" size="regular" text="Headline — regular" />
```

### Body

Body is the default variant. Size defaults to `"regular"`.

```tsx theme={null}
<Text size="fine" text="Body — fine" />
<Text size="compact" text="Body — compact" />
<Text size="regular" text="Body — regular" />
<Text size="featured" text="Body — featured" />
```

### Eyebrow

```tsx theme={null}
<Text variant="eyebrow" text="Section label" />
```

### Highlight and color

`highlighted` applies the suggested-change treatment and owns the foreground. `color` is ignored while highlighted.

```tsx theme={null}
<Text highlighted text="8.0h" />
<Text text="Muted note" color="subtle" align="center" />
```

## Accessibility

* Headline `el` sets `accessibilityRole="header"` and the heading level.
* Body and eyebrow are ordinary text.

**Text Props**

```tsx theme={null}
<Text variant="headline" el="h1" size="major" text="Page title" />
```

## `Text` Props

The `Text` accepts the following props. It does not expose a raw `style` override. Headline requires `el`. Body is the default variant.

**text** `ReactNode` *required*

Text content.

**align** `"start" | "center" | "end"`

Horizontal alignment.

**color** `"standard" | "subtle" | "informative" | "critical" | "inverse"` (default: standard)

Semantic foreground role. Ignored when `highlighted` is true.

**el** `"h1" | "h2" | "h3" | "h4" | "h5" | "h6"`

Semantic heading level. Required when `variant` is `"headline"`.

**highlighted** `boolean` (default: false)

Suggested-change highlight treatment.

**size** `HeadlineSize | BodySize`

Visual scale. Headline defaults to `"major"`. Body defaults to
`"regular"`. Unavailable on eyebrow.

**testID** `string`

Test hook forwarded to the underlying `Text`.

**variant** `"headline" | "body" | "eyebrow"` (default: body)

Type role.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.