Typography
Atom
Type scale classes for headings, body text, and helper styles.
Playground
Every control sets a real prop of TypographyProps. The JSX below updates as you go.
Web
iOS
Android
JSX · TypographyProps
Variants
21 examples from src/atoms/typography/typography.md, each rendered live from its own JSX.
Anatomy
1
Text run
Dimmed parts appear only in some states or variants.
Props
129 props on TypographyProps, grouped as they are declared in source. Required props are marked *.
Accessibility and keyboard
Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
header
link
ARIA on web
aria-level
From the docs
foreground, inverse, action, actionForeground, and info name the ink; hue gives a stage its theme-aware identity text. inverseHint, inverseSubtle, inverseMuted, inverseSoft, and inverseFaint express the reference's hierarchy on branded surfaces. numberOfLines truncates a reading block, and accessible labels and roles stay with the text. Existing roles and defaults keep working.
Inline text that NAVIGATES should be a real link, not pressable text that sets location: pass href and the web render becomes a genuine browser link (middle-click, new tab, crawlers, and assistive tech all treat it as one). Native platforms ignore href, so pair it with an onPress that runs the same navigation through your router; underline supplies the conventional link look, and hrefAttrs forwards target / rel / download on the web.
Platform skins
The playground's props on each platform: same tree, native shapes, type and touch sizes.
Usage
Argus reading roles include subheading, label, micro, tag, eyebrow, eyebrowLg, stageLabel, statValue, metricValue, and formValue. These extend Typography itself. Semantic leading and tracking props preserve the reference's fractional web metrics; for example labelLeading is the compact label line box and wideTracking its uppercase eyebrow tracking. extraBold selects the 800 face. The owner's exact-reference directive preserves the existing 9.5px eyebrows.
foreground, inverse, action, actionForeground, and info name the ink; hue gives a stage its theme-aware identity text. inverseHint, inverseSubtle, inverseMuted, inverseSoft, and inverseFaint express the reference's hierarchy on branded surfaces. numberOfLines truncates a reading block, and accessible labels and roles stay with the text. Existing roles and defaults keep working.
section lets a heading own its count, muted description and trailing actions. They wrap along a shared baseline, preserving dense section anatomy. Pair it with h5 bold labelLeading or subheading bold labelLeading; the latter uses the compact metadata metrics. Actions move to the far edge and wrap below on narrow surfaces.
Inline links (href)
Inline text that NAVIGATES should be a real link, not pressable text that sets location: pass href and the web render becomes a genuine browser link (middle-click, new tab, crawlers, and assistive tech all treat it as one). Native platforms ignore href, so pair it with an onPress that runs the same navigation through your router; underline supplies the conventional link look, and hrefAttrs forwards target / rel / download on the web.
Tokens
Read from the playground render. Values follow the scheme and the ion hue.
--f-dp
--fd
--ft