Text

Use typography to present your design and content as clearly and efficiently as possible.

Text automatically resolves the HTML tag, weight, size and responsive variations from the variant prop. It covers three groups: Block (running text), Headline (headings) and Display (high-impact headings).

When to use

Block

<Text variant="lead">Simple Text</Text>
<Text variant="p">Simple Text</Text>
<Text variant="meta">Simple Text</Text>

Headline

<Text variant="h1">H1 Headline</Text>
<Text variant="h2">H2 Headline</Text>
<Text variant="h3">H3 Headline</Text>
<Text variant="h4">H4 Headline</Text>
<Text variant="h5">H5 Headline</Text>
<Text variant="h6">H6 Headline</Text>

Display

<Text variant="d1">H1 Display</Text>
<Text variant="d2">H2 Display</Text>
<Text variant="d3">H3 Display</Text>
<Text variant="d4">H4 Display</Text>

Forcing mobile / desktop

The Headline and Display variants have different styles on mobile and desktop. To force one style to be displayed regardless of the screen, use the type prop.

<Text variant="h2" text="Headline auto" />
<Text variant="h2" text="Headline Desktop" type="desktop" />
<Text variant="h2" text="Headline Mobile" type="mobile" />

Typography props

The following Text props can be adjusted:

• fontSize
• fontWeight
• lineHeight
• letterSpacing
• textTransform
• textDecoration
• fontStyle
• align
• color

<Text fontSize="nano" />
<Text fontWeight="bold" />
<Text lineHeight="wild" />
<Text letterSpacing="wild" />
<Text textTransform="captalyze" />
<Text fontStyle="code" />
<Text color="danger" />

Live values (tick)

Pass the number behind a live cell as tick. On every change the ink snaps to success (up) or danger (down) and eases back to the idle color over theme.animation.transitions.settle (~2.75s). Only the color moves — no layout shift, no wrapper. The first value is a baseline; equal values do not flash. Users with prefers-reduced-motion get the snap without the fade.

<Text variant="h3" tick={lastPrice} text={formatPrice(lastPrice)} />

Use it for the number that changed, not for a column that stays green or red as a standing tone — that is plain color.

Combining styles

Defaults from the theme

A bare <Text> (no fontWeight / color) reads theme.component.text — the component tier — so a themer can set the default weight or ink once instead of at every call site. Explicit props and the variant bundle still win.

createTheme({ component: { text: { fontWeight: 'light', color: 'ink.secondary' } } });

For the whole ladder (what light / regular / bold / stronger mean in CSS numbers), use the brand-level typeWeight origin on createTheme / ApollionProvider — see Theming, config-first.

Inline links inside a paragraph keep their own fontWeight — the prose engine only underlines them.

<Text variant="h2">
  Hello I am a{' '}
  <Text as="span" color="grayscale.20" textDecoration="underline">
    Text
  </Text>
</Text>

Links in prose (automatic underline)

Any Link inside a Text is automatically underlined by the container — the one who knows the content is prose is the Text, so it is the one asserting the rule. This keeps the link distinguishable by more than color (WCAG 1.4.1), regardless of the link's own textDecoration. Link.Button is left out and keeps its button appearance.

<Text variant="p">
  Read our <Link href="/privacidade" text="privacy policy" /> and the{' '}
  <Link href="/termos" textDecoration="none" text="terms of use" /> before proceeding.{' '}
  <Link.Button href="/entrar" text="Sign in" variant="contained" />
</Text>

Tag attributes

The final tag and the set of accepted HTML attributes come from the same rule the runtime uses: as when provided, otherwise the variant's tag, otherwise span.

In practice the main path is the variant: variant="blockquote" renders <blockquote> and accepts cite; variant="meta" renders <p> (the variant declares the tag) and accepts what a <p> accepts. as is the one-off override — as="time" unlocks dateTime, as="li" unlocks value — and wins over the variant when both appear. Without as and without variant, the global attributes of a <span> apply (id, title, aria-*, handlers).

This closes the blockquote variant case: the quote and the quote's source can be declared together, with no cast and no redundant as at the call-site.

<figure>
  <Text variant="blockquote" cite="https://example.com/materia">
    Quoted excerpt from the external outlet
  </Text>
  <figcaption>
    <Text variant="meta">
      <cite>Outlet name</cite> —{' '}
      <Text as="time" dateTime="2026-07-30">
        30/07/2026
      </Text>
    </Text>
  </figcaption>
</figure>

Interactive Demo

loading

Properties

Besides the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.

See also

• Storybook story: Components / Text
• Variant map: variantStyleProps — extensible via custom themes.