← Components/primitives

Text

Carbon's Text component, re-implemented as a polymorphic typography primitive for body / label / helper copy. Headings live in ./heading.tsx; this primitive covers everything that isn't a heading.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗
primitives-text--defaultOpen all variants →

When to use

  • Any body, label, helper, eyebrow, or code copy that should obey the Avala type scale.
  • Replace inline <p className="text-sm text-muted-foreground">…</p> patterns. The kind/size/color triple keeps decisions reviewable.
  • Marketing eyebrows above a headline — <Text kind="eyebrow" size="md">SECTION</Text>.

When not to use

  • Headings → use `<Heading>` from patterns. It has Section-context-driven level resolution.
  • Inline links inside prose → use `Link`. Text doesn't carry link affordances.
  • Form labels associated with an input → use `FormLabel`. It binds for/id automatically.