Text

Renders a single text node as any semantic HTML element. Uses design tokens for size, weight, and color so text always respects the consumer’s theme.

Add via CLI

npx @a2ra/cli add text

Sizes

Colors

Semantic elements

Example JSON

{
  "type": "Text",
  "props": {
    "as": "h2",
    "size": "xl",
    "weight": "semibold",
    "color": "default"
  },
  "children": "Account settings"
}

Props

Prop	Type	Description
as	p default h1 h2 h3 h4 span label	HTML element to render
size	xs sm md default lg xl 2xl	Font size
weight	normal default medium semibold bold	Font weight
color	default default muted primary danger	Text color token
align	left default center right justify	Text alignment
italic	true false default	Italic style
truncate	true false default	Single-line truncation with ellipsis
children	string node[]	Text content

Notes

• Use as to choose the right semantic element. All font size and weight values are independent of the element, so as: "h2" does not automatically make the text large.
• truncate: true adds overflow-hidden text-ellipsis whitespace-nowrap and requires a fixed or constrained width on the parent to take effect.