Skip to content
Components

Text

The typography primitive for body copy - renders a <p> (or any element via as or render). Ships without a line-length cap; add max-w-prose at the call site for long-form prose. size names a type role, defaults to paragraph-sm and accepts responsive values: size={{ base: "paragraph-sm", md: "paragraph-lg" }}.

High-quality materials sourced from sustainable suppliers, each documented with finishes, dimensions, and availability.

Usage

import { Text, TEXT_SIZES, TextSize, textSizeClasses } from "@instruments/materia-ui/components/text";

Best practices

  • as is a closed text-only vocabulary - use as="span" for inline copy; as="div"/as="label" are type errors (use Box for wrappers, Label for form labels).

  • as and render are mutually exclusive (render wins, dev-warned); Text ships without a line-length cap - add max-w-prose at the call site for long-form prose.

Props

PropTypeDefaultDescription
as"dd" | "dt" | "figcaption" | "legend" | "li" | "p" | "span"

Render as a different host element from the closed text vocabulary ({@link TextElement}). The set is deliberately closed and text-only: as="div" and as="label" are type errors (use Box for decorative wrappers, Label for form labels). Ref and event-handler types remain the default element's (HTMLParagraphElement). as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

sizeResponsiveValue<"caption" | "paragraph-sm" | "paragraph" | "paragraph-lg" | "subheading" | "subheading-lg" | "heading-sm">"paragraph-sm"

Type role - a single role or a responsive object like { base: "paragraph-sm", md: "paragraph-lg" }.

variant"default" | "muted" | "accent"

Text colour variant

weight"normal" | "medium" | "semibold"

Font weight

Also exports

  • constTEXT_SIZES
  • typeTextSize
  • consttextSizeClasses

Composition

Used by

CheckboxField, CookieBanner, Empty, FileUploadDropzone, LoadingState, MobileNavigationRoot, MonthYearPicker, PageHeader, PixelLoader, ProductCard, RadioGroup, SectionHeader, SiteFooter, Slider, StreamingText, ThinkingTrace