displaytexulinot agent-emittableapp
Text
text
Body copy, labels and small print with a size, tone and weight from the design system.
One token contract, every theme. Display components take color, radius, density and state styling from the --tx-* token contract — the same variables the theme strip below overrides — so a theme swap re-colors them without per-component fixes.
Live examples
Muted helper text
Muted helper text
Loading demo…
Small print
Small print
Eyebrow (overline)
Eyebrow (overline)
Large figure
Large figure
Nested text that inherits
Nested text that inherits
Struck price
Struck price
In your theme
This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.
Violet
backgroundsurfaceprimaryaccentborder
Monochrome
backgroundsurfaceprimaryaccentborder
Accessible Dark Contrast
backgroundsurfaceprimaryaccentborder
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
as | enum (p, span, div, label, small, strong) | no | "p" | — |
size | enum (figure, lg, md, sm, xs, inherit) | no | "md" | figure is a large number outside stat (the title size of the type scale); inherit takes the parent's size and line height |
tone | enum (default, muted, subtle, primary, success, warning, destructive, info, inherit) | no | "default" | — |
weight | enum (regular, medium, semibold) | no | "regular" | — |
truncate | boolean | no | false | One line with an ellipsis |
lineClamp | number | no | — | Clamp to 1 to 10 lines with an ellipsis |
align | enum (start, center, end) | no | "start" | — |
mono | boolean | no | false | The design system's code family |
tabular | boolean | no | false | Tabular figures (font-variant-numeric: tabular-nums) for numbers that line up |
transform | enum (none, uppercase, lowercase, capitalize) | no | "none" | — |
tracking | enum (normal, wide) | no | "normal" | Letter spacing; wide is the eyebrow tracking (--tx-letter-spacing-wide) |
italic | boolean | no | false | — |
strikethrough | boolean | no | false | Line-through |
for | string | no | — | With as="label": the id of the labelled control |
label | string | no | — | Plain text, escaped; replaces children when both are given |
class | string | no | — | — |
children | slot | no | — | The text |
Keyboard
| Key | Action |
|---|---|
a, p | Never renders a heading element: as is p, span, div, label, small or strong. |
A | A tone never carries meaning alone; the words say it. |
Accessibility
- Never renders a heading element: as is p, span, div, label, small or strong.
- A tone never carries meaning alone; the words say it.
Evidence for text
Latest committed gates for text (as of 2026-10-23). Static snapshot — not live CI.
Behavior
n/ano behavior scenario
No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).
Size (gzip)
texuli/text · budget 12.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Body text, helper text, captions, muted or small print
- Text with a status ink (success, warning, destructive, info) next to a word that says it
Don’t use when
Prefer another component
- A title or section heading (use heading)
- Long-form content (use prose)