Text

Ported

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/monet/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/monet/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/monet/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/monet/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/monet/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>
  );
}

Clamp to lines

truncate={2} shows two lines, then an ellipsis, such as a note preview in a list. Screen readers read the whole text.

Strong on clock trees and timing closure. Wants to stay close to silicon bring-up, and asked twice about the Taipei lab and the tape-out schedule for next spring.

Sam Lee, Oct 14: The Ashby owner was wrong, so the candidate moved to Kai Ito, who ran the first screen. Kai will set up the loop with the thermal team after the offsite, and send the take-home before Friday.

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

export function ClampToLines() {
  return (
    <div style={{ display: "grid", gap: "var(--et-space-3)", maxInlineSize: "22rem" }}>
      <Text truncate={2}>
        Strong on clock trees and timing closure. Wants to stay close to silicon bring-up, and asked twice about the Taipei lab and the tape-out
        schedule for next spring.
      </Text>
      <Text size="sm" variant="secondary" truncate={3}>
        Sam Lee, Oct 14: The Ashby owner was wrong, so the candidate moved to Kai Ito, who ran the first screen. Kai will set up the loop with the
        thermal team after the offsite, and send the take-home before Friday.
      </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/monet/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>
  );
}

Accessibility

Body text is a p, and a heading variant is a span, until you set as. Only h1–h6 put it in the heading outline.
Text cut by truncate is cut only on screen. Screen readers read the whole text.
Set as to the heading level that fits the page. variant="heading1" sets the look, not the level.
variant="error" and "success" change only the color. Say the meaning in the words too.

API reference

Prop	Type	Default	Description
truncate	boolean \| number	–	Ends the text in an ellipsis: `true` on one line, or after a number of lines, such as `truncate={2}` for a note preview. Screen readers read the whole text.
DANGEROUS_className	string	–	Layout only: margin, width, grid placement. Never restyle the text with it.
DANGEROUS_style	CSSProperties	–	Layout only.
children	ReactNode	–
onCopy	() => void	–	Called after each copy.
copyLabel	string	"Copy to clipboard"	Names the copy button.
copiedLabel	string	"Copied"	What screen readers hear after a copy.
copyKeysLabel	(keys: string) => string	"Press ⌘C to copy"	Shown when the clipboard fails, with this device's copy keys ("⌘C" or "Ctrl+C").
variant	"heading" \| "heading1" \| "heading2" \| "heading3"	–
size	"lg"	–
bold	never	–
as	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span" \| "label" \| "dt" \| "dd" \| "li" \| "figcaption" \| "legend" \| "pre" \| "code" \| "em" \| "strong" \| "small" \| "abbr" \| "time"	"span". Pass `"h1"`–`"h6"` when the text belongs in the document outline.	Required: the element for this text's place in the outline, or `"span"`.