Skip to main content

Text

Text is a typography component for displaying content with consistent type styles, like page titles, body copy, or captions. It supports responsive sizes, semantic colors, and any HTML element.

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

  • 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

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

Text renders a div unless you set as, whatever the size. Set as for headings and paragraphs so the markup matches the content.

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

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.