Skip to content
← Inventory

Text

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

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

Usage

import { Text, textSizeClasses } from "@desk/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 asChild are mutually exclusive (asChild 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"li" | "p" | "span" | "dd" | "dt" | "figcaption" | "legend"

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 asChild are mutually exclusive; if both are passed, asChild wins (a dev-only warning fires).

sizeResponsiveValue<"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl">

Text size — accepts a static size or responsive object like { base: "sm", md: "lg" }

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

Text color variant

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

Font weight

asChildboolean

Merge props onto child element using Slot

Also exports

  • consttextSizeClasses

Composition

Used by

CheckboxField, Empty, FileUploadDropzone, LoadingState, MobileNavigationRoot, MonthYearPicker, PageHeader, PixelLoader, ProductCard, SectionHeader, StreamingText, ThinkingTrace