Text

A block-level text container that scopes the color hierarchy of its contents. Use priority to dial the emphasis from primary (most prominent, --text-1) down to quinary (least prominent, --text-5), and tone to apply a tinted palette (brand, success, critical, warning, info). Pass inline to render as inline-block for use in the middle of other text.

Text also owns Anta’s prose-link styling. Links nested inside <Text> are styled by the design system — there are no per-page overrides to maintain.

Props

Prop	Type	Description
`expandable?`	`boolean`	Show a fade hint and chevron over the truncated text and let the user expand it by clicking the chevron region or pressing Enter while the chevron has keyboard focus. Only takes effect together with `truncate`.
`inline?`	`boolean`	Render as inline-block instead of the default block element.
`priority?`	`'primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'quinary'`	Visual priority. Maps to text-1..text-5. Defaults to 'primary' (text-1).
`tone?`	`'info' \| 'brand' \| 'success' \| 'critical' \| 'warning'`	Color tint. Applies the matching `--text-{N}-{tone}` palette.
`truncate?`	`number \| boolean`	Truncate with a trailing ellipsis. `true` (or `1`) clamps to a single line; any integer ≥ 2 clamps to that many lines. Uses the `-webkit-line-clamp` technique, supported in all major browsers (Firefox 68+, Chrome, Safari, Edge).

Inherited props (className, style, children)

Prop	Type	Description
`className?`	`string`	CSS class name. Merged with any internal classes by the component.
`style?`	`CSSProperties`	Inline styles applied to the root element.
`children?`	`ReactNode`	Child elements. When provided, replaces the component's default label/content.

Examples

Priority

<Text priority="primary">Primary emphasis</Text>
<Text priority="secondary">Secondary emphasis</Text>
<Text priority="tertiary">Tertiary emphasis</Text>
<Text priority="quaternary">Quaternary emphasis</Text>
<Text priority="quinary">Quinary emphasis</Text>

Tinted

<Text tone="info" priority="secondary">Informational note</Text>
<Text tone="critical">Something broke</Text>
<Text tone="success" priority="tertiary">Saved</Text>

Inline

<p>
  This paragraph has a <Text inline tone="info">tinted phrase</Text>{' '}
  in the middle.
</p>

Truncate

{/* Single line */}
<Text truncate>
  This very long sentence will be cut off with an ellipsis…
</Text>

{/* Multi-line — pass the line count */}
<Text truncate={3}>
  Long paragraph that wraps across many lines but stops at three…
</Text>

truncate

The quick brown fox jumps over the lazy dog repeatedly while the morning sun rises over a sleepy town that nobody has visited in years and years and years.

truncate={2}

The quick brown fox jumps over the lazy dog repeatedly while the morning sun rises over a sleepy town that nobody has visited in years and years and years.

truncate={3}

The quick brown fox jumps over the lazy dog repeatedly while the morning sun rises over a sleepy town that nobody has visited in years and years and years.

truncate accepts either true (or 1) for a single-line ellipsis or any integer ≥ 2 for multi-line clamping. Both modes use -webkit-line-clamp inside display: -webkit-box. Despite the -webkit- prefix, every major browser supports it (Firefox 68+, Chrome, Safari, Edge). The host gets min-width: 0 so truncation works correctly inside flex and grid containers.

Expandable

<Text truncate expandable>…</Text>
<Text truncate={3} expandable>…</Text>

Pair expandable with truncate to let the user reveal the full text. Single-line truncation gets a horizontal fade on the right edge; multi-line gets a vertical fade over the last line. A chevron-down hint appears in the bottom-right corner on hover or keyboard focus — clicking the chevron or focusing the element and pressing Enter expands the text and the clamp is removed. The element is exposed as role="button" with aria-expanded while collapsed; once expanded it reverts to plain text.

truncate expandable

The quick brown fox jumps over the lazy dog repeatedly while the morning sun rises over a sleepy town that nobody has visited in years and years and years and years.

truncate={3} expandable

The quick brown fox jumps over the lazy dog repeatedly while the morning sun rises over a sleepy town that nobody has visited in years and years and years and years.

truncate={5} expandable

The quick brown fox jumps over the lazy dog repeatedly while the morning sun rises over a sleepy town that nobody has visited in years and years and years and years.

Links inside

<Text priority="primary">
  Read the <a href="#">full guide</a> to get started.
</Text>

<Text priority="tertiary">
  Footnote with a <a href="#">muted link</a> that brightens on hover.
</Text>

Link behavior

Links inside <Text> follow a priority-aware hierarchy that keeps emphasis consistent with the surrounding text:

Priority	Link color (default)	Link color (hover)
`primary`	`--link-color` (brand blue)	`--link-color-hover`
`secondary`	`--link-color`	`--link-color-hover`
`tertiary`	`currentColor` (= `--text-3`)	`--text-2`
`quaternary`	`currentColor` (= `--text-4`)	`--text-3`
`quinary`	`currentColor` (= `--text-5`)	`--text-4`

The underline is a 0.5px hairline at 75% alpha by default and bumps to 1px / 100% alpha on hover. On :active it returns to the 0.5px / 75% resting state.

For tinted text (tone="brand|success|critical|warning|info") links are always muted regardless of priority — they take currentColor and step up to the next-stronger level of the same tint on hover. At priority="primary" there is no level above, so hovering only brings the underline to full alpha.