Text

A <span> with one of crisp's two ambient text colours — tone="default" (the app's primary text colour) or "muted" — for the plain runs of text that aren't any of crisp's other typed things: a cell's own yes/no, an empty-state caption, a secondary line under a heading. One component so every such spot reaches for crisp's own tokens instead of each hand-writing its own colour utility for the same two values.

Text sets no font-size, weight, or line-height of its own — it inherits type from context, the same choice MiddleTruncate makes for the same reason: plain text has no single measured size across the app (a table cell, a label, a caption are all different sizes).

Installation

npm install @crisp-ui-kit/crisp

Props

Notes

• brand/danger reuse tokens already measured against Attio for the same colours in a different arrangement, not a fresh value: brand is fgBrandContrast (crisp#897 — the plain accent, bgBrandSolid, only clears 3.23:1 as text on a white page; the darker contrast-safe sibling clears 4.5:1+), the same colour TextLink's own brand tone uses. danger is fgDanger (a solid critical/destructive label — an overdue due-date, a destructive menu item's own text), not fgDangerSoft (a soft Badge pill's text, a different measured hex).
• asChild renders the given element directly (Radix Slot), with no wrapping <span> — pass a <div>/<p>/<li> and it keeps that element's own block layout untouched (crisp#757: a fixed display: inline on the class used to override it).