# Text

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<Text>The quick brown fox jumps over the lazy dog.</Text>
```

## API Reference

This component is based on the `span` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop                                                                                                                                                                   | Type                                                      | Default  |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | -------- |
| `as`Shorthand for changing the default rendered element into a semantically appropriate alternative. Cannot be used in combination with `asChild`.                     | `"span" \| "div" \| "label" \| "p"`                       | `"span"` |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`                                                 | —        |
| `size`                                                                                                                                                                 | `Responsive<enum>`                                        | —        |
| `weight`                                                                                                                                                               | `Responsive<"light" \| "regular" \| "medium" \| "bold">`  | —        |
| `align`Sets the CSS [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) property.                                                                | `Responsive<"left" \| "center" \| "right">`               | —        |
| `trim`Trims the leading whitespace from the start or end of the text.                                                                                                  | `Responsive<"normal" \| "start" \| "end" \| "both">`      | —        |
| `truncate`Truncates text with an ellipsis. Be aware of [common pitfalls](https://css-tricks.com/flexbox-truncated-text/) in flex layouts.                              | `boolean`                                                 | —        |
| `wrap`Controls the wrapping behavior of the text. See the corresponding [text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap) values for details.    | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | —        |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details.                                          | `enum`                                                    | —        |
| `highContrast`Uses a higher contrast color for the component.                                                                                                          | `boolean`                                                 | —        |

## Examples

### As another element

Use the `as` prop to render text as a `p`, `label`, `div` or `span`. This prop is purely semantic and does not alter visual appearance.

```jsx
<>

<Text as="p">This is a <Strong>paragraph</Strong> element.</Text>

<Text as="label">This is a <Strong>label</Strong> element.</Text>

<Text as="div">This is a <Strong>div</Strong> element.</Text>

<Text as="span">This is a <Strong>span</Strong> element.</Text>

</>;
```

### Size

Use the `size` prop to control text size. This prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.

```jsx
<Flex direction="column" gap="3">

	<Text size="1">The quick brown fox jumps over the lazy dog.</Text>

	<Text size="2">The quick brown fox jumps over the lazy dog.</Text>

	<Text size="3">The quick brown fox jumps over the lazy dog.</Text>

	<Text size="4">The quick brown fox jumps over the lazy dog.</Text>

	<Text size="5">The quick brown fox jumps over the lazy dog.</Text>

	<Text size="6">The quick brown fox jumps over the lazy dog.</Text>

	<Text size="7">The quick brown fox jumps over the lazy dog.</Text>

	<Text size="8">The quick brown fox jumps over the lazy dog.</Text>

	<Text size="9">The quick brown fox jumps over the lazy dog.</Text>

</Flex>
```

Sizes 2–4 are designed to work well for long-form content.

```jsx
<>

<Text as="p" mb="5" size="4">

  The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.

</Text>



<Text as="p" mb="5" size="3">

  The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.

</Text>



<Text as="p" size="2" color="gray">

  The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.

</Text>

</>;
```

Sizes 1–3 are designed to work well for UI labels.

```jsx
<Grid align="center" columns="2" gap="5" p="3">

	<Flex direction="column">

		<Text size="3" weight="bold">

			Get started

		</Text>

		<Text color="gray" size="2">

			Start your next project in minutes

		</Text>

	</Flex>



	<Flex direction="column">

		<Text size="2" weight="bold">

			Get started

		</Text>

		<Text color="gray" size="2">

			Start your next project in minutes

		</Text>

	</Flex>



	<Flex direction="column">

		<Text size="2" weight="bold">

			Get started

		</Text>

		<Text color="gray" size="1">

			Start your next project in minutes

		</Text>

	</Flex>



	<Flex direction="column">

		<Text size="1" weight="bold">

			Get started

		</Text>

		<Text color="gray" size="1">

			Start your next project in minutes

		</Text>

	</Flex>

</Grid>
```

### Weight

Use the `weight` prop to set the text weight.

```jsx
<>

<Text weight="regular" as="div">

  The quick brown fox jumps over the lazy dog.

</Text>



<Text weight="medium" as="div">

  The quick brown fox jumps over the lazy dog.

</Text>



<Text weight="bold" as="div">

  The quick brown fox jumps over the lazy dog.

</Text>

</>;
```

### Align

Use the `align` prop to set text alignment.

```jsx
<>

<Text align="left" as="div">Left-aligned</Text>

<Text align="center" as="div">Center-aligned</Text>

<Text align="right" as="div">Right-aligned</Text>

</>;
```

### Trim

Use the `trim` prop to trim the leading space at the start, end, or both sides of the text box.

The prop works similarly to the upcoming [half-leading control](https://www.w3.org/TR/css-inline-3/#leading-trim) spec, but uses a common [negative margin workaround](https://seek-oss.github.io/capsize/) under the hood for cross-browser support.

```jsx
<Flex direction="column" gap="3">

	<Text trim="normal" style={{
      "background": "var(--gray-a2)",
      "border-top": "1px dashed var(--gray-a7)",
      "border-bottom": "1px dashed var(--gray-a7)"
    }}>

		Without trim

	</Text>

	<Text trim="both" style={{
      "background": "var(--gray-a2)",
      "border-top": "1px dashed var(--gray-a7)",
      "border-bottom": "1px dashed var(--gray-a7)"
    }}>

		With trim

	</Text>

</Flex>
```

Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, padding looks larger on top and bottom than on the sides.

```jsx
<Flex direction="column" gap="3">

	<Box style={{
      "background": "var(--gray-a2)",
      "border": "1px dashed var(--gray-a7)"
    }} p="4">

		<Heading mb="1" size="3">

			Without trim

		</Heading>

		<Text>

			The goal of typography is to relate font size, line height, and line width

			in a proportional way that maximizes beauty and makes reading easier and

			more pleasant.

		</Text>

	</Box>



	<Box p="4" style={{
      "background": "var(--gray-a2)",
      "border": "1px dashed var(--gray-a7)"
    }}>

		<Heading mb="1" size="3" trim="start">

			With trim

		</Heading>

		<Text trim="end">

			The goal of typography is to relate font size, line height, and line width

			in a proportional way that maximizes beauty and makes reading easier and

			more pleasant.

		</Text>

	</Box>

</Flex>
```

The default trim values are configured for the system font stack that’s used by Radix Themes. If you are using custom fonts, you can [adjust](/themes/docs/theme/typography#customization) the trim values using the corresponding CSS variables.

```css
.radix-themes {

	--default-leading-trim-start: 0.42em;

	--default-leading-trim-end: 0.36em;

	--heading-leading-trim-start: 0.42em;

	--heading-leading-trim-end: 0.36em;

}
```

### Truncate

Use the `truncate` prop to truncate text with an ellipsis when it overflows its container.

```jsx
<Flex maxWidth="300px">

	<Text truncate>

		The goal of typography is to relate font size, line height, and line width

		in a proportional way that maximizes beauty and makes reading easier and

		more pleasant.

	</Text>

</Flex>
```

### Wrap

Use the `wrap` prop to control text wrapping.

```jsx
<Flex maxWidth="270px">

	<Text wrap="nowrap">

		The goal of typography is to relate font size, line height, and line width

		in a proportional way that maximizes beauty and makes reading easier and

		more pleasant.

	</Text>

</Flex>
```

```jsx
<Flex maxWidth="270px">

	<Text wrap="balance">

		The goal of typography is to relate font size, line height, and line width

		in a proportional way that maximizes beauty and makes reading easier and

		more pleasant.

	</Text>

</Flex>
```

```jsx
<Flex maxWidth="270px">

	<Text wrap="pretty">

		The goal of typography is to relate font size, line height, and line width

		in a proportional way that maximizes beauty and makes reading easier and

		more pleasant.

	</Text>

</Flex>
```

`text-wrap: pretty` is an experimental value that is [not yet supported in all browsers](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#browser_compatibility). However, it can be treated as a progressive enhancement for browsers that do support it.

### Color

Use the `color` prop to assign a specific [color](/themes/docs/theme/color). The text colors are designed to achieve at least Lc 60 APCA contrast over common background colors.

```jsx
<Flex direction="column">

	<Text color="indigo">The quick brown fox jumps over the lazy dog.</Text>

	<Text color="cyan">The quick brown fox jumps over the lazy dog.</Text>

	<Text color="orange">The quick brown fox jumps over the lazy dog.</Text>

	<Text color="crimson">The quick brown fox jumps over the lazy dog.</Text>

</Flex>
```

### High-contrast

Use the `highContrast` prop to increase color contrast with the background.

```jsx
<Flex direction="column">

	<Text color="gray">The quick brown fox jumps over the lazy dog.</Text>

	<Text color="gray" highContrast>

		The quick brown fox jumps over the lazy dog.

	</Text>

</Flex>
```

### With formatting

Compose `Text` with formatting components to add emphasis and structure to content.

```jsx
<Text as="p">

	Look, such a helpful <Link href="#">link</Link>, an <Em>italic emphasis</Em>,

	a piece of computer <Code>code</Code>, and even a hotkey combination{" "}

	<Kbd>⇧⌘A</Kbd> within the text.

</Text>
```

### With form controls

Composing `Text` with a form control like [`Checkbox`](/themes/docs/components/checkbox), [`RadioGroup`](/themes/docs/components/radio-group), or [`Switch`](/themes/docs/components/switch) automatically centers the control with the first line of text, even when the text is multi-line.

```jsx
<Box maxWidth="300px">

	<Text as="label" size="3">

		<Flex gap="2">

			<Checkbox defaultChecked /> I understand that these documents are

			confidential and cannot be shared with a third party.

		</Flex>

	</Text>

</Box>
```