Anta›Text MENU
On this page

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); the default is secondary (--text-2) — body text reads a step softer than the strongest foreground, so reach for primary when you want emphasis. Pair with 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.

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

PriorityLink color (default)Link color (hover)
primary--link-color (brand blue)--link-color-hover
secondary--link-color--link-color-hover
tertiarycurrentColor (= --text-3)--text-2
quaternarycurrentColor (= --text-4)--text-3
quinarycurrentColor (= --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.

Demo

Priority — neutral

priority="primary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="secondary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="tertiary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quaternary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quinary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.

Priority — tone="brand"

priority="primary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="secondary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="tertiary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quaternary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quinary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.

Priority — tone="success"

priority="primary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="secondary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="tertiary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quaternary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quinary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.

Priority — tone="critical"

priority="primary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="secondary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="tertiary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quaternary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quinary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.

Priority — tone="warning"

priority="primary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="secondary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="tertiary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quaternary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quinary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.

Priority — tone="info"

priority="primary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="secondary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="tertiary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quaternary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.
priority="quinary"The quick brown fox jumps over the lazy dog with a code pill and a link inside the sentence.

Playground

Preview
priority
tone
size
truncate
className
style
children

Truncation & expansion

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.

{/* Single line */}
<Text truncate>{longSentence}</Text>


{/* Multi-line — pass the line count */}
<Text truncate={2}>{longSentence}</Text>
<Text truncate={3}>{longSentence}</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.

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. The chevron is a real <button> carrying aria-expanded — clicking it (or focusing it and pressing Enter) drops the clamp and reveals the full text. expandable only takes effect together with truncate.

<Text truncate expandable>{longSentence}</Text>
<Text truncate={3} expandable>{longSentence}</Text>
<Text truncate={5} expandable>{longSentence}</Text>

Component props

PropTypeDefaultDescription
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?primarysecondarytertiaryquaternaryquinarysecondaryVisual priority. Maps to text-1..text-5 (primary = text-1, the strongest). The default is secondary (text-2) — body text reads a step softer than the strongest foreground; pass primary for emphasis.
size?smallmediumlargemediumType scale. small = 13/16, medium = 15/20, large = 17/24.
tone?infobrandsuccesscriticalwarning—Color tint. Applies the matching --text-{N}-{tone} palette.
truncate?numberboolean—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 (children, className, id, style, tabIndex, title)
PropTypeDefaultDescription
children?ReactNode—Child elements. When provided, replaces the component's default label/content.
className?string—CSS class name. Merged with any internal classes by the component.
id?string—HTML id attribute.
style?CSSProperties—Inline styles applied to the root element.
tabIndex?number—Tab order. Set to -1 to skip the element when tabbing.
title?string—HTML title attribute — native browser tooltip on hover.

Component tokens

Text derives its colors from the global token system. Every variable below has a light and dark mode value defined in anta_global_tokens.css.

TokenDescription
--text-1 … --text-5Neutral text levels (most → least prominent)
--text-1-{tone} … --text-5-{tone}Tinted text levels for each tone value
--link-colorDefault prose-link color (priorities 1 & 2)
--link-color-hoverHover prose-link color (priorities 1 & 2)

<a-text> itself exposes four internal variables that carry the resolved values into its descendant link rule:

TokenDescription
--text-colorResolved text color for the priority/tone
--text-link-colorColor used by a-text a at rest
--text-link-hoverColor used by a-text a:hover
--text-link-underline-alphaAlpha applied to the underline (50% / 100%)