Vortex Design system

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

Features

Supports different typography tokens for heading, body, and link text.
Supports responsive size, color, align, and wrap.
Can render a custom root element with the as prop.
Supports lineClamp, decoration, and tabularNums.
Customizable via className and attributes props.

Sizes

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

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 Regular</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>
<Text size="body-md-desktop" color="inverse">
  Inverse text
</Text>
<Text size="body-md-desktop" color="static-white">
  Static white text
</Text>
<Text size="body-md-desktop" color="static-black">
  Static black text
</Text>
<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 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.

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 deleted, removed, or unavailable text.

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

<Text size="body-md-desktop" tabularNums>$1,234.56</Text>
<Text size="body-md-desktop" tabularNums>$12,345.67</Text>
<Text size="body-md-desktop" tabularNums>$123,456.78</Text>

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.