GitHub

Text

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

Pattern

text.*

Component

<Text>

Intents

27
View as Markdown

Intents

text.body<p>

Running text: sentences and paragraphs that explain something

text.lead<p>

Introductory paragraph directly under a page or section title

text.caption<p>

A supporting sentence next to something else: helper text under a field, a note under an image

text.label<span>

A few words that name a value: field labels, setting names, column headers. Use as="label" htmlFor=... for form fields

text.current<span>

The page you are on, named at the end of a breadcrumb trail. Not a link. Pass aria-current="page"

text.term<p>

The name of a fact, above its value in a layout.fact: Profile, Status, Raised with

text.value<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<span>

Small facts about an item: timestamps, authors, @handles, file sizes

text.quote<blockquote>

Words quoted from someone, set apart from the text around them: a pull quote in an article, a testimonial. Renders <blockquote>

text.excerpt<p>

A short extract of a longer text, shown as a preview: an article summary

text.topic<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<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<span>

A number that sums something up: unread notifications, items waiting

text.indicator<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<summary>

The line that stays visible in a layout.disclosure; pressing it opens or closes the content

text.line<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<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<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<span>

One line of a text.diff; data-change="add" or "remove" marks and tints it

text.token<span>

A highlighted piece of code; data-token names it: "tag", "attr", "string" or "punct"

text.snippet<code>

A short piece of code inside a sentence: an element, an intent, a command

text.tally<span>

The number in a layout.tally.item, counting up as the work it measures happens

text.delta<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<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<p>

A headline number on its own: a metric, a result, a price

text.code<pre>

A block of code or terminal output shown to the reader

text.address<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.*

  • 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.*

  • Commands, named for what they do: save, delete, share. With an href they render a link, without one a button.

    action.*

  • Moving around: the home link, pages of the site, views of the same content, steps of a flow.

    nav.*

  • Picking from a small set shown all at once: options for a setting, filters, colours.

    choice.*

  • What the user types or picks in a form. The intent sets the element, the input type, the input mode and autocomplete.

    field.*

  • Page regions and groups. The intent picks the element (main, section, form, ul…) and the arrangement.

    layout.*

  • Images that identify a person or illustrate content, with a text fallback when there is no image.

    media.*

  • Modal interruptions built on the native <dialog>: a task, a confirmation, a full-screen reader.

    dialog.*

  • Things that open next to the button that opened them without blocking the page: menus, pickers, extra detail.

    popover.*

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.