Components
Typography
Polymorphic text component with a full variant, tone, and weight scale.
Typography renders text on the design scale, with as for the element.
Example
Preview
Heading
Body text in the base tone, set at a comfortable reading measure.
Muted secondary text.
Caption / metadataimport { Typography } from '@officina/ui';
<Typography variant="h2">Heading</Typography>
<Typography variant="body" tone="muted">Secondary copy</Typography>API
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "center" | "end" | "justify" | "left" | "right" | "start" | null | — | |
| as | ElementType | — | Render as a different element/component while keeping the styles. |
| gutterBottom | boolean | null | — | |
| leading | "normal" | "relaxed" | "tight" | null | — | |
| lineClamp | enum | — | Truncate after N lines with an ellipsis. |
| noWrap | boolean | null | — | |
| tone | "base" | "muted" | "subtle" | "accent" | "danger" | "success" | "warning" | null | — | |
| transform | "capitalize" | "lowercase" | "none" | "uppercase" | null | — | |
| variant | "body" | "caption" | "code" | "h1" | "h2" | "h3" | "h4" | "title" | "display" | "body-sm" | "overline" | null | body | |
| weight | "bold" | "medium" | "regular" | "semibold" | null | — |