Text

Text

<Text as="h1" size="3xl" weight="bold">Page title</Text>
<Text size="sm" tone="muted">Caption text</Text>
<Text as="p">Body paragraph.</Text>

Install: @helixui/core

import { Text } from '@helixui/core'

status: stable · since: 0.1.0

Tags: typography, text, inline

Anatomy

Inline or block text with token sizes/weights/tones

Layout

• display — inline
• width — auto
• height — auto
• intrinsicSize — as configured by element
• stackable — true
• fullBleed — false

Visual

Renders as any element (default <span>). Props expose font.size, font.weight, color tone, alignment.

Props

Name	Type	Default	Description
as	ElementType	span	Element to render.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'	md	Maps to font.size.* tokens.
weight	'regular' | 'medium' | 'semibold' | 'bold'	—	Maps to font.weight.* tokens.
tone	'primary' | 'secondary' | 'muted' | 'inverse' | 'brand' | 'danger' | 'success' | 'warning'	primary	Color tone.
align	'start' | 'center' | 'end'	—	Text alignment.
truncate	boolean	false	Single-line truncation with ellipsis.

Tokens used

font.size.xs, font.size.sm, font.size.md, font.size.lg, font.size.xl, font.size.2xl, font.size.3xl, font.size.4xl, font.weight.regular, font.weight.medium, font.weight.semibold, font.weight.bold, color.text.primary, color.text.secondary, color.text.muted, color.text.action.brand, color.text.action.danger, color.text.action.success, color.text.action.warning

Accessibility

Notes

• Use as to render the correct semantic element. <Text as="h1" size="3xl"> for page titles.
• Do not rely on size alone for hierarchy — use the right heading element.

Composes with

Component	Relation	Note
Stack	parent	Often inside a Stack.
Card	parent	Body content of a Card.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

muted helper text

“small muted helper line”

<Text size="sm" tone="muted">Helper text</Text>