GitHub

Text

Headings, running text and feedback messages. The intent decides the element (<h1>, <p>, <span>, <pre>) and the look.

Renders

h1h2h3

Intents

37

Domains

heading.*text.*feedback.*
View as Markdown

Other components

Examples

A page title

A kicker names the section, the page heading is the one <h1>, and the lead introduces the page.

Preview

Settings

Notifications

Choose what we email you about, and how often.

<Layout intent="layout.group">
  <Text intent="heading.kicker">Settings</Text>
  <Text intent="heading.page">Notifications</Text>
  <Text intent="text.lead">Choose what we email you about, and how often.</Text>
</Layout>

An item and its facts

Facts about one thing go in text.meta, side by side in a layout.meta.

Preview

Quarterly report

PDF2.4 MBUpdated 3 days ago

Revenue grew in every region, led by new customers in the north.

<Layout intent="layout.group">
  <Text intent="heading.item">Quarterly report</Text>
  <Layout intent="layout.meta">
    <Text intent="text.meta">PDF</Text>
    <Text intent="text.meta">2.4 MB</Text>
    <Text intent="text.meta">Updated 3 days ago</Text>
  </Layout>
  <Text intent="text.excerpt">Revenue grew in every region, led by new customers in the north.</Text>
</Layout>

Messages

feedback.* intents are announced to screen readers: errors at once, the rest politely.

Preview

Your changes were saved.

<Layout intent="layout.group">
  <Text intent="feedback.success">Your changes were saved.</Text>
  <Text intent="feedback.error">That address is already taken.</Text>
</Layout>

Figures

A headline number is text.stat; the words that name it are text.label.

Preview

12

Projects

4

Members

2.1 GB

Storage
<Layout intent="layout.collection" className="grid-cols-3">
  <Layout intent="layout.group">
    <Text intent="text.stat">12</Text>
    <Text intent="text.label">Projects</Text>
  </Layout>
  <Layout intent="layout.group">
    <Text intent="text.stat">4</Text>
    <Text intent="text.label">Members</Text>
  </Layout>
  <Layout intent="layout.group">
    <Text intent="text.stat">2.1 GB</Text>
    <Text intent="text.label">Storage</Text>
  </Layout>
</Layout>

Intents it renders

3 domains, each with its own page of neighbours and examples. The intent decides the element; these are the starter intents.

Heading heading.*

6 intents
  • heading.pitch

    The persuasive headline of a marketing page: what the product does for you

    <h1>
  • heading.page

    The one title of a page: Settings, Sign in, Privacy policy, a profile name

    <h1>
  • heading.section

    Title of a major part of a page

    <h2>
  • heading.item

    Title of a single thing: a list item, a panel, a dialog. A link in it keeps the heading colour

    <h3>
  • heading.side

    The name of one side in a side-by-side comparison: With intents, Without. A step smaller than heading.item, so it reads as a label over what is compared

    <h3>
  • heading.kicker

    A short label above a heading that names its category

    <p>

Text text.*

27 intents
  • text.body

    Running text: sentences and paragraphs that explain something

    <p>
  • text.lead

    Introductory paragraph directly under a page or section title

    <p>
  • text.caption

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

    <p>
  • text.label

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

    <span>
  • text.current

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

    <span>
  • text.term

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

    <p>
  • text.value

    The value of a fact, under its text.term. A value that links somewhere goes in a text.topic; plain words do not

    <div>
  • text.meta

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

    <span>
  • text.quote

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

    <blockquote>
  • text.excerpt

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

    <p>
  • text.topic

    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

    <span>
  • text.status

    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

    <span>
  • text.count

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

    <span>
  • text.indicator

    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

    <span>
  • text.summary

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

    <summary>
  • text.line

    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

    <div>
  • text.output

    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

    <span>
  • text.diff

    The change a step in an agent terminal made to a file: its removed and added lines, each a text.diff.line

    <div>
  • text.diff.line

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

    <span>
  • text.token

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

    <span>
  • text.snippet

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

    <code>
  • text.tally

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

    <span>
  • text.delta

    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

    <span>
  • text.marker

    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"

    <span>
  • text.stat

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

    <p>
  • text.code

    A block of code or terminal output shown to the reader

    <pre>
  • text.address

    The address in a layout.window.bar

    <span>

Feedback feedback.*

4 intents
  • feedback.error

    Something failed or input is invalid. Announced to screen readers immediately

    <p>
  • feedback.warning

    Something may go wrong unless the user acts

    <p>
  • feedback.success

    An action the user took worked

    <p>
  • feedback.info

    A neutral status about the current state: loading, searching, nothing to show yet

    <p>

Props

Plus its element’s usual attributes (id, onClick, aria-*, data-*) and the shared layout props below. No className or style.

  • intent required

    What this text is for: heading.*, text.* or feedback.*.

    TextIntent
  • as

    Changes the element for document structure only, like as="label" for a field label or as="h2" for a dialog title. The intent still decides the look.

    'h1'…'h6' | 'p' | 'span' | 'div' | 'label'
  • htmlFor

    With as="label": the id of the field it labels.

    string
  • vars

    Values that come from data, as CSS variables the intent reads: vars={{ '--accent': user.color }}.

    Record<`--${string}`, string | number>
  • unsafeClassName

    Bypasses the intent. Needs a // prongs-unsafe: <reason> comment on the line above, and prongs check counts it.

    string

Layout props

Where the element sits, never how it looks. Spacing between elements comes from the parent <Layout>.

  • align

    On text, the text alignment. On anything else, pushes it to that end of its row or column.

    'start' | 'center' | 'end'
  • width

    Full width, or a maximum width.

    'auto' | 'full' | 'prose' | 'sm' | 'md' | 'lg'
  • hideBelow

    Hidden on screens narrower than this breakpoint.

    'sm' | 'md' | 'lg'
  • showBelow

    Shown only on screens narrower than this breakpoint.

    'sm' | 'md' | 'lg'
  • truncate

    One line, cut off with an ellipsis.

    boolean
  • nowrap

    Keeps the text on one line.

    boolean

Rules

  • No className or style. If text needs to look different, it is a different intent.

  • Use as only to fix document structure, never to change the look.

  • Emphasis inside a sentence is plain <strong> or <em>, not another <Text>.