# Text > Body copy, labels and small print with a size, tone and weight from the design system. One token contract, every theme. Catalog id text. Language: en Canonical: https://texuli.com/component-pages/text/ Markdown: https://texuli.com/component-pages/text.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML. Last Updated: 2026-11-13 --- [Components](https://texuli.com/component-pages/) Text display texuli not agent-emittable app `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. - Violetlight mode · AA contrast`background` - `surface` - `primary` - `accent` - `border` [Open Theme Studio](https://texuli.com/theme-studio/) - Monochromelight mode · AA contrast`background` - `surface` - `primary` - `accent` - `border` [Open Theme Studio](https://texuli.com/theme-studio/) - Accessible Dark Contrastdark mode · AAA contrast`background` - `surface` - `primary` - `accent` - `border` [Open Theme Studio](https://texuli.com/theme-studio/) ## Props Public props for Text | 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 Keyboard behavior for Text | 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/a no 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 `. ### Axe documented - `tests/e2e/site-component-pages.spec.ts` - `docs/quality (a11y-*)` Site component pages axe gate; package-level a11y docs under docs/quality when present. ### Browsers - `chromium` - `webkit` - `mobile` 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) ## Related - [`heading`](https://texuli.com/component-pages/heading/) - [`prose`](https://texuli.com/component-pages/prose/) - [`inline-text`](https://texuli.com/component-pages/inline-text/) - [`mark`](https://texuli.com/component-pages/mark/) ## For agents The live preview, prop editor and copyable code run in the browser. The component manifest holds the same props, events, examples and guidance as data. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md). MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)): - `component.get`: Read a component manifest with `{"id":"text"}`. - `example.search`: Find component examples. - `catalog.search`: Search the component catalog. Docs: - [text component doc (Markdown)](https://texuli.com/llms/components/text.md) - [Component docs for agents (llms.txt)](https://texuli.com/llms/llms.txt) - [Catalog manifest snapshot (JSON)](https://texuli.com/catalog/catalog.json) - [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md) - [@texuli/catalog README](https://github.com/DailybotHQ/texuli/blob/main/packages/catalog/README.md)