Text

Foundational text primitive.

The quick brown fox jumps over the lazy dog.

<.text>The quick brown fox jumps over the lazy dog.</.text>

API Reference

This component is based on the span element.

Prop	Type	Default	Description
`align`	`string`	`—`	Text alignment: one of left, center, right.
`as`	`string`	`"span"`	The element to render. Can be 'span', 'div', 'label', or 'p'. Defaults to 'span'.
`as_child`	`boolean`	`false`	Composes the component into its immediate child instead of rendering its own HTML element.
`class`	`string`	`nil`
`color`	`string`	`—`	Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
`high_contrast`	`boolean`	`—`	Whether to increase color contrast with the background.
`size`	`any`	`—`	Text size from 1 to 9. Controls font size, line height, and letter spacing. Can be "1" or %{xs: "1", sm: "2", md: "3", lg: "4", xl: "5"}. Defaults to 1.
`style`	`string`	`""`
`trim`	`string`	`—`	Trim leading space: one of normal, start, end, both.
`truncate`	`boolean`	`—`	Whether to truncate text with ellipsis when it overflows.
`weight`	`string`	`—`	Font weight: one of light, regular, medium, bold.
`wrap`	`string`	`—`	Text wrapping: one of wrap, nowrap, pretty, balance.

align Text alignment: one of left, center, right.

Type string Default —

as The element to render. Can be 'span', 'div', 'label', or 'p'. Defaults to 'span'.

Type string Default "span"

as_child Composes the component into its immediate child instead of rendering its own HTML element.

Type boolean Default false

class

Type string Default nil

color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.

Type string Default —

high_contrast Whether to increase color contrast with the background.

Type boolean Default —

size Text size from 1 to 9. Controls font size, line height, and letter spacing. Can be "1" or %{xs: "1", sm: "2", md: "3", lg: "4", xl: "5"}. Defaults to 1.

Type any Default —

style

Type string Default ""

trim Trim leading space: one of normal, start, end, both.

Type string Default —

truncate Whether to truncate text with ellipsis when it overflows.

Type boolean Default —

weight Font weight: one of light, regular, medium, bold.

Type string Default —

wrap Text wrapping: one of wrap, nowrap, pretty, balance.

Type string Default —

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.

This is a paragraph element.

This is a label element.

This is a div element.

This is a span element.

<.flex direction="column" gap="3">
  <.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>
</.flex>

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.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

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

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.

<.flex direction="column" gap="5">
  <.text as="p" 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" 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>
</.flex>

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

Get started Start your next project in minutes

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

The quick brown fox jumps over the lazy dog.

<.flex direction="column" gap="3">
  <.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>
</.flex>

Align

Use the align prop to set text alignment.

Left-aligned

Center-aligned

Right-aligned

<.box width="100%">
  <.text align="left" as="div">Left-aligned</.text>
  <.text align="center" as="div">Center-aligned</.text>
  <.text align="right" as="div">Right-aligned</.text>
</.box>

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 spec, but uses a common negative margin workaround under the hood for cross-browser support.

Without trim With trim

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

Without trim

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.

With trim

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.

<.flex direction="column" gap="3">
  <.box p="4" style="background: var(--gray-a2); border: 1px dashed var(--gray-a7);">
    <.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>

Truncate

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

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.

<.flex max_width="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.

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

<.flex direction="column" gap="3" max_width="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>
  <.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>
  <.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>

Color

Use the color prop to assign a specific color. The text colors are designed to achieve at least Lc 60 APCA contrast over common background colors.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

<.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 high_contrast prop to increase color contrast with the background.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

<.flex direction="column">
  <.text color="gray">The quick brown fox jumps over the lazy dog.</.text>
  <.text color="gray" high_contrast>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.

Look, such a helpful link , an italic emphasis , a piece of computer code, and even a hotkey combination ⇧⌘A within the text.

<.text as="p">
  Look, such a helpful <.es_link href="#">link</.es_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, RadioGroup, or Switch automatically centers the control with the first line of text, even when the text is multi-line.

I understand that these documents are confidential and cannot be shared with a third party.

<.box max_width="300px">
  <.text as="label" size="3">
    <.flex gap="2">
      <input type="checkbox" checked />
      I understand that these documents are confidential and cannot be shared with a third party.
    </.flex>
  </.text>
</.box>