Text

Text in one of Etched's type roles. Headings are strong and balanced; body text is regular and wraps pretty.

Run 1,284 passed thermal soak

The chip held 71 °C under full load.

Bench B-14, Oct 15 at 02:14

import { Text } from "@etched/reticle/text";

export function Preview() {
  return (
    <div>
      <Text variant="heading" size="lg">
        Run 1,284 passed thermal soak
      </Text>
      <Text>The chip held 71 °C under full load.</Text>
      <Text variant="secondary" size="sm">
        Bench B-14, Oct 15 at 02:14
      </Text>
    </div>
  );
}

Installation

import { Text } from "@etched/reticle/text";

Examples

Headings

Pass as when the heading belongs in the page outline.

Run 1,284 passed thermal soak

Bench B-14 overview

Thermal results for the last seven days

Notes from the night shift

Owner

Heading style in a span, outside the outline

import { Text } from "@etched/reticle/text";

export function Headings() {
  return (
    <div>
      <Text variant="heading1" as="h1">
        Run 1,284 passed thermal soak
      </Text>
      <Text variant="heading2" as="h2">
        Bench B-14 overview
      </Text>
      <Text variant="heading" size="lg" as="h4">
        Thermal results for the last seven days
      </Text>
      <Text variant="heading" as="h5">
        Notes from the night shift
      </Text>
      <Text variant="heading3" as="h6">
        Owner
      </Text>
      <Text variant="heading">Heading style in a span, outside the outline</Text>
    </div>
  );
}

Sizes

xs: Run 1,284 finished on bench B-14 at 02:14. The chip held 71 °C under full load for six hours.

sm: Run 1,284 finished on bench B-14 at 02:14. The chip held 71 °C under full load for six hours.

base: Run 1,284 finished on bench B-14 at 02:14. The chip held 71 °C under full load for six hours.

lg: Run 1,284 finished on bench B-14 at 02:14. The chip held 71 °C under full load for six hours.

import { Text, type TextSize } from "@etched/reticle/text";

const sizes: TextSize[] = ["xs", "sm", "base", "lg"];

export function Sizes() {
  return (
    <div>
      {sizes.map((s) => (
        <Text key={s} size={s}>
          {s}: Run 1,284 finished on bench B-14 at 02:14. The chip held 71 °C under full load for six hours.
        </Text>
      ))}
    </div>
  );
}

Variants

body: Thermal soak on bench B-14

secondary: Thermal soak on bench B-14

success: Thermal soak on bench B-14

error: Thermal soak on bench B-14

bold: Owner changed to Ana Ruiz

import { Text } from "@etched/reticle/text";

const variants = ["body", "secondary", "success", "error"] as const;

export function Variants() {
  return (
    <div>
      {variants.map((v) => (
        <Text key={v} variant={v}>
          {v}: Thermal soak on bench B-14
        </Text>
      ))}
      <Text bold>bold: Owner changed to Ana Ruiz</Text>
    </div>
  );
}

Truncate and elements

SH-24A-0193 thermal soak, full load, six hours, bench B-14, night shift

Started 2026-10-15 02:14 by Sam Lee, ID run_7f3a91c2

import { Text } from "@etched/reticle/text";

export function TruncateAndElements() {
  return (
    <div className="grid">
      <Text truncate title="SH-24A-0193 thermal soak, full load, six hours, bench B-14, night shift">
        SH-24A-0193 thermal soak, full load, six hours, bench B-14, night shift
      </Text>
      <Text size="sm">
        Started <Text as="time" size="sm">2026-10-15 02:14</Text> by <Text as="strong" size="sm" bold>Sam Lee</Text>, ID{" "}
        <Text as="code" size="sm">run_7f3a91c2</Text>
      </Text>
    </div>
  );
}

API reference

Prop	Type	Default	Description
truncate	boolean	–	One line with an ellipsis.
DANGEROUS_className	string	–	Layout only: margin, width, grid placement. Never restyle the text with it.
DANGEROUS_style	CSSProperties	–	Layout only.
children	ReactNode	–
variant	"body" \| "secondary" \| "success" \| "error" \| "heading" \| "heading1" \| "heading2" \| "heading3"	"body"
size	"xs" \| "sm" \| "base" \| "lg"	"base"
bold	boolean	–	Strong weight for emphasis.
as	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span" \| "label" \| "dt" \| "dd" \| "li" \| "figcaption" \| "legend" \| "pre" \| "code" \| "em" \| "strong" \| "small" \| "abbr" \| "time"	"p"	Required: the element for this text's place in the outline, or `"span"`.