typography
Text
Polymorphic body text primitive. Renders as p, span, div, or label with size, weight, color, and truncation control.
Import
import { Text } from '@stella-ds/react'Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Font size preset |
| weight | 'normal' | 'medium' | 'semibold' | 'bold' | 'normal' | Font weight |
| color | 'primary' | 'secondary' | 'disabled' | 'primary' | Text color via starlight tokens |
| align | 'left' | 'center' | 'right' | 'left' | Text alignment |
| as | 'p' | 'span' | 'div' | 'label' | 'p' | HTML element to render |
| asChild | boolean | false | Radix Slot pattern |
| truncate | boolean | false | Truncate overflow with ellipsis |
Preview
Large Bold
Medium Medium
Small Secondary
Extra Small Disabled
This is a very long text that will be truncated with an ellipsis
Examples
Basic
<Text size="lg" weight="medium">Body copy</Text>
<Text as="span" color="secondary" size="sm">Caption text</Text>
<Text truncate>Long text that gets truncated...</Text>