Text
Typographic primitive that maps named text roles onto any element.
Contract
| Axis | Values | Default |
|---|---|---|
variant | caption, label, body, bodySm, code, headingSm, headingMd, headingLg, display, displayLg | body |
color | default, muted, placeholder, inverse, primary, info, success, warning, danger | inherit |
as | any element type | span |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/text.css';Scroll inside the code area to read long lines.
Imports
import { TRText } from '@tinyrack/ui/components/text';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Type roles permalink
Pick the role from meaning, then choose the element with the as prop so headings stay semantic.
Semantic color permalink
Reach for a color token by meaning; leave color unset to inherit the surrounding text color.
Alignment and truncation permalink
Logical alignment respects text direction, and truncate clamps a single overflowing line.
API
Options
| Prop | Type | Default | Purpose |
|---|---|---|---|
variant | 'caption' | 'label' | 'body' | 'bodySm' | 'code' | 'headingSm' | 'headingMd' | 'headingLg' | 'display' | 'displayLg' | 'body' | Selects the named type role from the design tokens. |
as | ElementType | 'span' | Chooses the rendered element without changing the visual role. |
color | 'default' | 'muted' | 'placeholder' | 'inverse' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | inherit | Applies a semantic color token; unset inherits the parent color. |
align | 'start' | 'center' | 'end' | inherit | Sets logical text alignment for the current direction. |
truncate | boolean | false | Clamps a single overflowing line with an ellipsis. |
weight | 'regular' | 'medium' | 'heading' | 'bold' | 'strong' | role default | Overrides the variant's font weight. |
HTML and accessibility
TRText renders a span by default and forwards its native props, events, styles, and React 19 ref. Use as to render a semantic element—p, a heading, or label—independently of the visual variant, so headings keep document structure. It exports TRTextProps, TRTextVariant, TRTextColor, TRTextAlign, and TRTextWeight. Per-instance overrides are available through the --tr-text-* custom properties.