Text

Pro

A run of text in the theme's type scale and colours, so a page sets its words without writing classes. Anything not set is inherited from around it. A colour never carries the meaning on its own: a destructive or warning tone goes with words that say what is wrong.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2 and 4.1.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/text

Brings in: tokens, utils · npm: @base-ui/react@^1.9.0

Usage

TSX · The example above

"use client"

import { Text } from "@/components/candor/text"

export default function Example() {
  return (
    <div className="flex max-w-md flex-col gap-2">
      <Text size="lg" weight="semibold">
        Nightly sync
      </Text>
      <Text tone="muted" size="sm">
        Copies changed accounts from the CRM to the warehouse every night at 02:00.
      </Text>
      <Text tone="warning" size="sm">
        Last run finished with 3 skipped records.
      </Text>
      <Text tone="faint" size="xs" truncate className="max-w-60">
        Owner: data-platform-oncall@company.example, escalation after two failed runs
      </Text>
    </div>
  )
}

<Text>

Prop	Type	Default	Description
tone	`TextTone \| undefined`	—	The colour, by what the text is: `muted` for secondary words, `faint` for the least important. Inherited when left out.
size	`TextSize \| undefined`	—	The step of the type scale. Inherited when left out.
weight	`keyof typeof weights \| undefined`	—	How heavy the type is. Inherited when left out.
truncate	`boolean \| undefined`	false	Keeps the text on one line and ends it with an ellipsis where it doesn't fit. The whole text stays in the page, so a screen reader reads all of it; give a way to see the rest (a tooltip, a detail view) where it matters. Only a box can cut its text, so a truncated Text is drawn as a block, a `<span>` too; for one inside a line, give it `className="inline-block max-w-…"`.
render	`useRender.RenderProp \| undefined`	—	The element to draw instead of a `<p>`: `render={<span />}` for text inside a line.
className	`string \| undefined`	—	Classes for the element, applied last, so they win over the props.
children	`React.ReactNode \| undefined`	—	The words.

Also takes the props of Omit<React.ComponentProps<"p">, "color">.

Values

textTones

A tone's class. The status tones are the theme's *-text colours, which it checks for contrast on the page.

Record<TextTone, string>

Types

TextTone: A text colour by what it says, from the theme's foreground roles: never a raw colour.; "default" | "muted" | "faint" | "destructive" | "success" | "warning"
TextSize: A step of the type scale. `base` is body text, which follows `data-density`.; "2xs" | "xs" | "sm" | "base" | "lg" | "xl"