Skip to main content

Text

Text renders typography with responsive sizes, semantic colors, and configurable HTML elements.

Import

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

Display

<Text size="body-md-desktop">Text</Text>

Other links

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

Features

  • Supports typography tokens for heading, body, and link text.
  • Supports responsive size, color, alignment, and wrapping.
  • Renders different HTML elements with as.
  • Can limit text to a fixed number of lines with lineClamp.
  • Supports font weight overrides, strikethrough text, and tabular numbers.
Reference Links
WAI heading structure guidance

Sizes

Text uses typography tokens for heading, body, and link styles. Each token has mobile and desktop variants.

Set as explicitly when semantics matter. Without it, heading sizes xl, lg, md, and sm map to h1 through h4; other sizes render a div. For a responsive size object, the largest defined breakpoint determines the element.

Title Text Sizes

Title text sizes are optimized for headings and titles.

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 text sizes are optimized for readability across different contexts.

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 text sizes are specifically designed for interactive elements.

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

Use the as prop to choose the rendered HTML element. The visual style remains controlled by size.

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

Text supports font weight overrides when a typography token needs 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

Use foreground color tokens to match the surrounding 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

Text can align to the start, center, or end of its container. Alignment supports responsive values.

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

The wrap prop controls how text wraps inside 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 visual strike-through. Use an appropriate semantic element, such as as="del", when the content represents a deletion.

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

Tabular Numbers

Use tabularNums when numbers should keep a consistent width, such as balances, counters, and tables.

$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

Text does not add ARIA behavior by default. Use semantic HTML through the as prop so headings, paragraphs, and inline text communicate their structure correctly.

Description
Use as to render the correct semantic element for the content, such as h1, p, or span.
Avoid using lineClamp for content that must always be available to users.