Skip to main content

Text

Text is a typography element that displays content with theme type styles, such as page titles, body copy, or captions.

Import

import { Text } from '@vortexlabs/vortex';
import type { TextProps } from '@vortexlabs/vortex';

Other links

Storybook
Vortex Design System
<Text
  size="body-md-desktop"
  weight="regular"
  color="default"
  align="start"
  wrap="wrap"
>
  Vortex Design System
</Text>

Features

  • Applies heading, body, and link typography tokens.
  • Supports responsive size, color, alignment, and wrapping.
  • Renders any HTML element with as.
  • Limits text to a set number of lines with lineClamp.
  • Supports weight overrides, strikethrough, and tabular numbers.
Reference Links
WAI heading structure guidance

Sizes

size picks a heading, body, or link typography token, each with mobile and desktop variants. Size only changes the look; Text renders a div unless you set as.

Title Text Sizes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<Text as="h1" size={{ xs: "heading-2xl-mobile", sm: "heading-2xl-desktop" }}>Heading 1</Text>
<Text as="h2" size={{ xs: "heading-xl-mobile", sm: "heading-xl-desktop" }}>Heading 2</Text>
<Text as="h3" size={{ xs: "heading-lg-mobile", sm: "heading-lg-desktop" }}>Heading 3</Text>
<Text as="h4" size={{ xs: "heading-md-mobile", sm: "heading-md-desktop" }}>Heading 4</Text>
<Text as="h5" size={{ xs: "heading-sm-mobile", sm: "heading-sm-desktop" }}>Heading 5</Text>
<Text as="h6" size={{ xs: "heading-xs-mobile", sm: "heading-xs-desktop" }}>Heading 6</Text>

Body Text Sizes

Body XL

Body LG

Body MD

Body SM

Body XS

<Text as="p" size={{ xs: "body-xl-mobile", sm: "body-xl-desktop" }}>Body XL</Text>
<Text as="p" size={{ xs: "body-lg-mobile", sm: "body-lg-desktop" }}>Body LG</Text>
<Text as="p" size={{ xs: "body-md-mobile", sm: "body-md-desktop" }}>Body MD</Text>
<Text as="p" size={{ xs: "body-sm-mobile", sm: "body-sm-desktop" }}>Body SM</Text>
<Text as="p" size={{ xs: "body-xs-mobile", sm: "body-xs-desktop" }}>Body XS</Text>

Link Text Sizes

Link LGLink MDLink SM
<Text as="span" size={{ xs: "link-lg-mobile", sm: "link-lg-desktop" }}>Link LG</Text>
<Text as="span" size={{ xs: "link-md-mobile", sm: "link-md-desktop" }}>Link MD</Text>
<Text as="span" size={{ xs: "link-sm-mobile", sm: "link-sm-desktop" }}>Link SM</Text>

Semantic Element

Set as to render the right element, like h2 or p. size still controls the look.

Page title

Body copy rendered as a paragraph.

Inline text rendered as a span.
<Text as="h1" size={{ xs: "heading-xl-mobile", sm: "heading-xl-desktop" }}>
  Page title
</Text>
<Text as="p" size="body-md-desktop" color="subtle">
  Body copy rendered as a paragraph.
</Text>
<Text as="span" size="body-sm-desktop">
  Inline text rendered as a span.
</Text>

Weight

Use weight to override the token's font weight for emphasis.

Light weight
Regular weight
Medium weight
Semibold weight
Bold weight
Heavy weight
Black weight
<Text size="body-lg-desktop" weight="light">Light weight</Text>
<Text size="body-lg-desktop" weight="regular">Regular weight</Text>
<Text size="body-lg-desktop" weight="medium">Medium weight</Text>
<Text size="body-lg-desktop" weight="semibold">Semibold weight</Text>
<Text size="body-lg-desktop" weight="bold">Bold weight</Text>
<Text size="body-lg-desktop" weight="heavy">Heavy weight</Text>
<Text size="body-lg-desktop" weight="black">Black weight</Text>

Color

Set color to a foreground token to match the UI state or emphasis.

Default text
Subtle text
Inverse text
Static white text
Static black text
Static primary text
Primary text
Primary bold text
Critical text
Critical bold text
Warning text
Warning bold text
Success text
Success bold text
Info text
Info bold text
Inherit text
<Text size="body-md-desktop" color="default">Default text</Text>
<Text size="body-md-desktop" color="subtle">Subtle text</Text>
<Stack backgroundColor="inverse" padding={3}>
  <Text size="body-md-desktop" color="inverse">Inverse text</Text>
</Stack>
<Stack
  padding={3}
  attributes={{ style: { backgroundColor: "var(--vortex-color-foreground-static-black)" } }}
>
  <Text size="body-md-desktop" color="static-white">Static white text</Text>
</Stack>
<Stack
  padding={3}
  attributes={{ style: { backgroundColor: "var(--vortex-color-foreground-static-white)" } }}
>
  <Text size="body-md-desktop" color="static-black">Static black text</Text>
</Stack>
<Text size="body-md-desktop" color="static-primary">Static primary text</Text>
<Text size="body-md-desktop" color="primary">Primary text</Text>
<Text size="body-md-desktop" color="primary-bold">Primary bold text</Text>
<Text size="body-md-desktop" color="critical">Critical text</Text>
<Text size="body-md-desktop" color="critical-bold">Critical bold text</Text>
<Text size="body-md-desktop" color="warning">Warning text</Text>
<Text size="body-md-desktop" color="warning-bold">Warning bold text</Text>
<Text size="body-md-desktop" color="success">Success text</Text>
<Text size="body-md-desktop" color="success-bold">Success bold text</Text>
<Text size="body-md-desktop" color="info">Info text</Text>
<Text size="body-md-desktop" color="info-bold">Info bold text</Text>
<Stack attributes={{ style: { color: "tomato" } }}>
  <Text size="body-md-desktop" color="inherit">Inherit text</Text>
</Stack>

Alignment

Set align to start, center, or end. It accepts a breakpoint object.

Start aligned text
Center aligned text
End aligned text
Responsive aligned text
<Text size="body-md-desktop" align="start">Start aligned text</Text>
<Text size="body-md-desktop" align="center">Center aligned text</Text>
<Text size="body-md-desktop" align="end">End aligned text</Text>
<Text size="body-md-desktop" align={{ xs: "start", md: "center", lg: "end" }}>
  Responsive aligned text
</Text>

Wrap

Use wrap to control how text wraps in its container.

Balanced heading text wraps across lines with more even line lengths.

Pretty wrapping improves line breaks for longer body copy where reading comfort matters.
Responsive wrapping can use balance on small screens and pretty on larger screens.
<Text as="p" size="heading-md-desktop" wrap="balance">
  Balanced heading text wraps across lines with more even line lengths.
</Text>
<Text size="body-md-desktop" wrap="pretty">
  Pretty wrapping improves line breaks for longer body copy where reading comfort matters.
</Text>
<Text size="body-md-desktop" wrap={{ xs: "balance", md: "pretty" }}>
  Responsive wrapping can use balance on small screens and pretty on larger screens.
</Text>

Line Clamp

Use lineClamp to limit text to a fixed number of lines. With lineClamp={1}, long words can break at any character to fit.

Long content can be clamped to one line when the available width is limited.
Long content can also be clamped to two lines when the surrounding layout needs a predictable height.
<Text size="body-md-desktop" lineClamp={1}>
  Long content can be clamped to one line when the available width is limited.
</Text>
<Text size="body-md-desktop" lineClamp={2}>
  Long content can also be clamped to two lines when the surrounding layout needs a predictable height.
</Text>

Decoration

Use decoration="line-through" for a strikethrough. Add as="del" when the content is a deletion.

Removed text
<Text size="body-md-desktop" decoration="line-through">Removed text</Text>

Tabular Numbers

Set tabularNums to give digits equal widths, so balances, counters, and table columns line up.

$1,234.56
$12,345.67
$123,456.78
<Stack gap={2} width="160px">
  <Text size="body-md-desktop" align="end" tabularNums>$1,234.56</Text>
  <Text size="body-md-desktop" align="end" tabularNums>$12,345.67</Text>
  <Text size="body-md-desktop" align="end" tabularNums>$123,456.78</Text>
</Stack>

Accessibility

Description
Text adds no ARIA behavior and renders a div by default. Set as to the element that matches the content, such as h1, p, or span.
Avoid using lineClamp for content that must always be available to users.