Text
A text rendering component that applies consistent typography. The as prop lets you choose the semantic HTML element, so you can combine accessibility and SEO with flexible styling.
Preview
Display Small
XLarge Semibold
Large Regular
Medium Regular
Small Regular
Examples
As
Specifies the HTML element to render. Visual style and semantics are independent, so you can use any element with any size.
| Value | Default | Description |
|---|---|---|
p | ✓ | Paragraph text |
span | Inline text | |
div | Block container | |
h1` ~ `h6 | Heading elements | |
label | Form label | |
li`, `ul`, `ol | List elements |
Size
Controls the text size. Follows the typography scale defined in design tokens.
| Value | Default | Description |
|---|---|---|
display-large | Large hero headings for landing pages | |
display-medium | Page-level headings | |
display-small | Section-level headings | |
xlarge | Major section titles | |
large | Subheadings, card titles | |
medium | ✓ | Default body text size |
small | Secondary text, descriptions | |
xsmall | Captions, labels, hints |
Display Large
Display Medium
Display Small
XLarge
Large
Medium
Small
XSmall
Weight
Controls the font weight.
| Value | Default | CSS | Description |
|---|---|---|---|
regular | ✓ | 400 | Body and descriptive text |
medium | 500 | Body text that needs emphasis | |
semibold | 600 | Subheadings, labels | |
bold | 700 | Primary headings, strong emphasis |
Regular — 400
Medium — 500
Semibold — 600
Bold — 700
Intent
Controls the color intent of the text.
| Value | Default | Description |
|---|---|---|
inherit | ✓ | Inherits color from the parent element |
primary | Primary content text color | |
secondary | Secondary content text color | |
success | Success or completion | |
warning | Warning | |
danger | Error or danger | |
neutral | Neutral color |
Inherit
Primary
Success
Warning
Danger
Neutral
Align
Controls text alignment.
| Value | Default | Description |
|---|---|---|
left | ✓ | Left align |
center | Center align | |
right | Right align |
Guidelines
Semantic markup
size controls visual size and as controls the HTML element. They work independently, so you can keep good semantic structure for SEO and accessibility while applying any design.
// Visually large but rendered as h2
<Text as="h2" size="large" weight="semibold">Section title</Text>
// Visually small but rendered as label
<Text as="label" size="small" weight="medium">Name</Text>Props
Props
as?"p"size?"medium"weight?"regular"intent?"inherit"align?"left"truncate?falsechildren?