# Text

Running text and the small pieces around it: introductions, captions, labels, facts about an item, code.

Pattern: `text.*` (this page) · Component: [`<Text>`](https://www.prongs.dev/docs/components/text.md) · Intents: [27](#intents)

## Intents

| Intent | Status | Use it for |
|---|---|---|
| [`text.body`](https://www.prongs.dev/docs/intents/text/body.md) | `<p>` | Running text: sentences and paragraphs that explain something |
| [`text.lead`](https://www.prongs.dev/docs/intents/text/lead.md) | `<p>` | Introductory paragraph directly under a page or section title |
| [`text.caption`](https://www.prongs.dev/docs/intents/text/caption.md) | `<p>` | A supporting sentence next to something else: helper text under a field, a note under an image |
| [`text.label`](https://www.prongs.dev/docs/intents/text/label.md) | `<span>` | A few words that name a value: field labels, setting names, column headers. Use as="label" htmlFor=... for form fields |
| [`text.current`](https://www.prongs.dev/docs/intents/text/current.md) | `<span>` | The page you are on, named at the end of a breadcrumb trail. Not a link. Pass aria-current="page" |
| [`text.term`](https://www.prongs.dev/docs/intents/text/term.md) | `<p>` | The name of a fact, above its value in a layout.fact: Profile, Status, Raised with |
| [`text.value`](https://www.prongs.dev/docs/intents/text/value.md) | `<div>` | The value of a fact, under its text.term. A value that links somewhere goes in a text.topic; plain words do not |
| [`text.meta`](https://www.prongs.dev/docs/intents/text/meta.md) | `<span>` | Small facts about an item: timestamps, authors, @handles, file sizes |
| [`text.quote`](https://www.prongs.dev/docs/intents/text/quote.md) | `<blockquote>` | Words quoted from someone, set apart from the text around them: a pull quote in an article, a testimonial. Renders <blockquote> |
| [`text.excerpt`](https://www.prongs.dev/docs/intents/text/excerpt.md) | `<p>` | A short extract of a longer text, shown as a preview: an article summary |
| [`text.topic`](https://www.prongs.dev/docs/intents/text/topic.md) | `<span>` | Names a topic or category an item belongs to: News, Science. Sits one surface level above what holds it. A link inside it covers the whole chip; without one, a link covering its item covers the chip too |
| [`text.status`](https://www.prongs.dev/docs/intents/text/status.md) | `<span>` | The state something is in, as a word in an outlined pill: Flying, Charging, On time. data-tone="success", "info", "pending", "warning", "danger" or "muted" colours it |
| [`text.count`](https://www.prongs.dev/docs/intents/text/count.md) | `<span>` | A number that sums something up: unread notifications, items waiting |
| [`text.indicator`](https://www.prongs.dev/docs/intents/text/indicator.md) | `<span>` | A dot that marks something as new or unread, or shows a status, with no number. Give it an aria-label, like "Unread" or "Charging"; data-tone="success", "info", "warning", "danger" or "muted" colours a status; data-busy makes it pulse while something is in progress |
| [`text.summary`](https://www.prongs.dev/docs/intents/text/summary.md) | `<summary>` | The line that stays visible in a layout.disclosure; pressing it opens or closes the content |
| [`text.line`](https://www.prongs.dev/docs/intents/text/line.md) | `<div>` | One line in an agent terminal; data-kind says what it is: "ask" for the person (or "prompt", set as a chat bubble), "skip" for a step that turned up nothing useful and "keep" for one that found what was wanted, "agent" for its reply, "step" for something it did, "run" for a check still running, "fail" for one that failed, "pass" for one that passed. Steps lead with an icon, and any output follows in a text.output |
| [`text.output`](https://www.prongs.dev/docs/intents/text/output.md) | `<span>` | The message a step in an agent terminal produced, such as what a check found, set under the step behind a thin rule. Code inside it goes in a text.snippet |
| [`text.diff`](https://www.prongs.dev/docs/intents/text/diff.md) | `<div>` | The change a step in an agent terminal made to a file: its removed and added lines, each a text.diff.line |
| [`text.diff.line`](https://www.prongs.dev/docs/intents/text/diff-line.md) | `<span>` | One line of a text.diff; data-change="add" or "remove" marks and tints it |
| [`text.token`](https://www.prongs.dev/docs/intents/text/token.md) | `<span>` | A highlighted piece of code; data-token names it: "tag", "attr", "string" or "punct" |
| [`text.snippet`](https://www.prongs.dev/docs/intents/text/snippet.md) | `<code>` | A short piece of code inside a sentence: an element, an intent, a command |
| [`text.tally`](https://www.prongs.dev/docs/intents/text/tally.md) | `<span>` | The number in a layout.tally.item, counting up as the work it measures happens |
| [`text.delta`](https://www.prongs.dev/docs/intents/text/delta.md) | `<span>` | How a number differs from the one it is compared with, beside it, like −74%: data-tone="good" or "bad" colours it by whether the change is an improvement; with no data-tone it stays hidden |
| [`text.marker`](https://www.prongs.dev/docs/intents/text/marker.md) | `<span>` | The label an inspector shows on the element it points at: its intent. Starts at the element's left edge, or its right edge when the layout.marker has data-align="end" |
| [`text.stat`](https://www.prongs.dev/docs/intents/text/stat.md) | `<p>` | A headline number on its own: a metric, a result, a price |
| [`text.code`](https://www.prongs.dev/docs/intents/text/code.md) | `<pre>` | A block of code or terminal output shown to the reader |
| [`text.address`](https://www.prongs.dev/docs/intents/text/address.md) | `<span>` | The address in a layout.window.bar |

## Choosing a domain

Find the row that describes your case, and use the domain on the right.

| If the problem is | Use |
|---|---|
| Titles that give a page its structure, from the marketing headline down to the title of one item. | [`heading.*`](https://www.prongs.dev/docs/intents/heading.md) |
| Running text and the small pieces around it: introductions, captions, labels, facts about an item, code. | `text.*` (this page) |
| Messages about what just happened or is happening. They are announced to screen readers. | [`feedback.*`](https://www.prongs.dev/docs/intents/feedback.md) |
| Commands, named for what they do: save, delete, share. With an href they render a link, without one a button. | [`action.*`](https://www.prongs.dev/docs/intents/action.md) |
| Moving around: the home link, pages of the site, views of the same content, steps of a flow. | [`nav.*`](https://www.prongs.dev/docs/intents/nav.md) |
| Picking from a small set shown all at once: options for a setting, filters, colours. | [`choice.*`](https://www.prongs.dev/docs/intents/choice.md) |
| What the user types or picks in a form. The intent sets the element, the input type, the input mode and autocomplete. | [`field.*`](https://www.prongs.dev/docs/intents/field.md) |
| Page regions and groups. The intent picks the element (main, section, form, ul…) and the arrangement. | [`layout.*`](https://www.prongs.dev/docs/intents/layout.md) |
| Images that identify a person or illustrate content, with a text fallback when there is no image. | [`media.*`](https://www.prongs.dev/docs/intents/media.md) |
| Modal interruptions built on the native <dialog>: a task, a confirmation, a full-screen reader. | [`dialog.*`](https://www.prongs.dev/docs/intents/dialog.md) |
| Things that open next to the button that opened them without blocking the page: menus, pickers, extra detail. | [`popover.*`](https://www.prongs.dev/docs/intents/popover.md) |

## For registry authors

**Starter intents.** These are the intents `prongs add` puts in your registry, shown in this site’s theme. Yours are your own `registry.ts`: rename, restyle and add to them, and see them with `prongs add gallery`.