Text

Text displays text content with consistent typography, supporting headings, body text, and styled variations for various contexts throughout the interface. It provides a unified typography system supporting display and section titles, body ladder, labels, overlines, monospace variants, and flexible formatting options. Built on Radix UI's Text and Heading components, it ensures consistent typography across the interface with full accessibility support, internationalization, and responsive behavior. Use for standard body text with default styling. Use heading types for page titles, section headers, and hierarchical content structure. Each maps to a default semantic heading tag (h1–h4). Use for the primary page title or main heading. Use for major section headings. Use for subsection headings. Use for minor headings or content labels. Non-heading 2.4rem type mapped to --text-heading. Use for metric values that must stay a span. Pair with strong for weight 600. Non-heading 1.8rem type mapped to --text-subheading. Use for dense standalone numeric displays that must stay a span; MetricCard always uses NumericDisplay. The reel renders every internal with the root’s text type, weight, and color. Static and animated text therefore use identical font-size, family, line-height, letter-spacing, and glyph metrics at BodySmall, NumericCompact, and NumericDisplay. Use headingLevel when the visual style should stay on one scale but the semantic tag must differ (for example, a page title that should be h2 for document order). Use different text sizes to establish visual hierarchy. Use for emphasized body text or introductory content. Use for standard body text and paragraphs. Use for secondary information, captions, or fine print. Use for eyebrows, labels, or distinctive uppercase-style text. Overline applies uppercase styling by default; you can override with transform. Use for form field labels and compact UI labels (medium weight by default). Use for text that matches button typography (bold weight by default). Use for supporting or secondary one-line text. Use for monospace content at the medium scale (e.g. code snippets, IDs). Use for compact monospace (e.g. inline tokens, metadata). Use color variants to convey meaning or establish visual hierarchy. Use semantic colors to communicate meaning or status. Use base color variants for standard text hierarchy. Control text alignment for layout purposes. Apply different font weights for emphasis or hierarchy. Use for strong emphasis or important information. Use for subtle emphasis without full bold weight. Apply text transformations for stylistic purposes. Truncate text that overflows its container with an ellipsis. When text is truncated, a title attribute is automatically added with the full text content for accessibility. Prevent text from wrapping to multiple lines. Combine multiple properties for complex text styling. Embed interactive elements within text content. Use the formatMessageProps prop for internationalized text with embedded formatting. The Trans component handles interpolation and formatting of internationalized content while preserving embedded React components. Use headings in a proper semantic hierarchy. Display error messages with appropriate styling. Display success messages with appropriate styling. Use text components for form labels and help text.