Text

import { Stack } from "@hel/ui/stack"
import { Text } from "@hel/ui/text"

When to use it#

Use Text for anything that is not a title: paragraphs, descriptions, captions, hints and status messages. It sets the font, size and color from the design system, so the copy in one part of the app matches the copy in the rest, and the colors follow the active theme.

For titles, use Heading.

Import#

Copyimport { Text } from "@hel/ui/text"

Examples#

Size#

Five sizes cover most interfaces. Small is the default and fits most body copy. Medium suits an introduction, and the two smallest suit captions and fine print.

import { Stack } from "@hel/ui/stack"
import { Text } from "@hel/ui/text"

Tone for meaning#

tone is a color role, not a color. primary is main text and muted is secondary text. placeholder and disabled are for hints and unavailable things. success, warning, danger and info carry a status. Color alone is not enough for everyone, so say what happened in the words too, as these do.

import { Stack } from "@hel/ui/stack"
import { Text } from "@hel/ui/text"

Weight, alignment and cutting off#

weight is normal, medium or semibold. align follows the reading direction, so start means the left in English and the right in Arabic, and the same goes for end. truncate keeps the text on a single line and ends it with an ellipsis when it doesn't fit. It needs a width to work against. In a row, put the text inside a Flex with fill, so it takes the remaining space and can shrink.

Choosing the element#

Text renders a p. Use as for something else, such as as="span" to put bold text inside a sentence, or as="label" and as="li" when the element carries the meaning.

Copy<Text>
  Revenue this week: <Text as="span" weight="semibold">$8,930</Text>
</Text>

Props#

Text also takes every prop of the element it renders.