Text

stablev0.1.0

The design system's typography primitive. Renders any of the 19 arbitrated Named Styles (process/TYPO-MAPPING.md, theme.css) while deliberately decoupling the HTML tag from the visual style: `as` picks the semantic element (h1, p, span, label, a...), `variant` picks the Named Style — never both at once. Also the primary migration vehicle for MUI <Typography variant="X"> usage across products (see Text.rfc.md §4.4 for the full crosswalk).

Open in Figma Machine contract (Text.meta.ts)

Variants

Titles — heading ladder (as defaults to h1–h6)

Title 2XL — page title (h1)

Title XL (h2)

Title LG (h3)

Title MD (h4)

Title SM (h5)

Title XS (h6)

Title jumbo — KPI/counter display (as defaults to p, not a heading)

1 284

Content — base (14px) and compact (12px), weight variants

Content base — regular body text (p)

Content base medium

Content base bold

Content compact — secondary/dense body text (p)

Content compact medium

Content compact bold

Content — links (underline + focus ring, as defaults to a)

Content base link — inline navigable text Content compact link

Content — caption, highlight, button, code

Content caption — annotation/legend text (span)

Content highlight — emphasized lead text (p)

Content button — reserved for the Button component (span)Content code — inline code sample (code)

Examples

// Section title — as defaults to h3 for title-lg
<Text variant="title-lg">Threat overview</Text>

// Same visual style, different semantics — as/variant never merge
<Text as="div" variant="title-lg">Card header, not a heading</Text>

// Standard body paragraph (as defaults to p)
<Text variant="content-base">Lorem ipsum dolor sit amet.</Text>

// Inline link — as defaults to a; underline + focus ring included in the variant
<Text as="a" href="/reports" variant="content-base-link">
  View full report
</Text>

// className is the sole styling escape hatch (color, spacing, alignment...)
<Text variant="content-compact" className="text-default-secondary">
  Last updated 2 minutes ago
</Text>

// MUI migration — variant="h3" component="div" becomes:
<Text as="div" variant="title-lg">Widget title</Text>

Props

Prop	Type
`as`	`React.ElementType (optional) — the native HTML tag to render (e.g. "h1", "p", "span", "label", "a"). Purely semantic, never affects the visual style. Defaults to a sensible tag per variant when omitted (TEXT_DEFAULT_TAG export; full rationale table in Text.rfc.md §4.1).`
`variant`	`TextVariant (required) — the Named Style to apply, sourced from theme.css / process/TYPO-MAPPING.md. No implicit default: MUI's own silent body1 default was found to cause ambiguity in 11% of real usages (Text.rfc.md §2.4).`
`className`	`string (optional) — extra classes merged via tailwind-merge. The sole styling escape hatch in v1 scope: color, alignment, truncation, spacing all flow through here instead of dedicated props (Text.rfc.md §7 Out of scope).`
`children`	`React.ReactNode (required) — the text content.`

Accessibility

2.1 AAWCAG pass

Criteria: 1.3.1 Info and Relationships — `as` renders the real native element (h1–h6, p, span, label, a, code) with no ARIA role substitution, so the document outline and text semantics are exactly what the markup says; `variant` never influences this (Text.rfc.md «Arbitrage»). 1.4.3 Contrast (Minimum) — Text sets no default color of its own by design; color flows through className, chosen per usage. The pairs above document the common/recommended token combinations exercised in the demo: normal-size content-* variants at 4.5:1, and large (≥24px) title-2xl/xl/lg headings at the WCAG large-text allowance of 3:1. 2.4.7 Focus Visible / 2.1.1 Keyboard — Text adds no keyboard handling of its own. The two link variants (content-base-link, content-compact-link) default to <a> and include the standard focus-ring utility classes, active whenever the consumer supplies href (or overrides as to another focusable element); all other variants are static, non-interactive text with no focus behaviour. wcagStatus 'pass' basis: axe-core conformity suite reports 0 violations across every variant in both modes (the demo surface), and all three declared contrast pairs are computed from tokens in CI (pnpm check:contrast) rather than hand-entered. Automated checks cover roughly half of WCAG — human/screen-reader audit cadence still applies per release.