Text

See all Text in the typography page.

Overview

The <Text /> component provides consistent typography styles across your application. It supports multiple semantic tags and visual variants, including display and body sizes. You can optionally include icons using named slots.

Basic Usage

<Text>Default paragraph text</Text>

<Text tag="h3" variant="displayMD">
  Heading with Display Variant
</Text>

Examples

Props

Prop	Type	Default	Description
tag	string	"p"	Semantic HTML tag to render (e.g., "h1", "span", "a")
variant	string	"textMD"	Visual text style variant
class	string	""	Additional custom classes
id	string	""	Optional id for anchors
href	string	""	Used when tag="a" to create a link

Slots

Slot	Description
default	Text content
left-icon	Icon rendered before the text
right-icon	Icon rendered after the text

---

Variants

Available variant values include:

display6XL, display5XL, display4XL, display3XL,
display2XL, displayXL, displayLG, displayMD, displaySM, displayXS,
textXL, textLG, textBase, textSM, textXS

Example

<Text variant="textXS">Extra Small Text</Text>
<Text variant="displayMD">Medium Display</Text>
<Text variant="display6XL">Hero Headline</Text>

Examples

---

Icon Usage

<Text variant="textSM" class="flex items-center gap-2">
  <Plus slot="left-icon" size="sm" />
  With Left Icon
</Text>

<Text variant="textSM" class="flex items-center gap-2">
  With Right Icon
  <Plus slot="right-icon" size="sm" />
</Text>

---

Custom Classes

<Text variant="textXL" class="uppercase tracking-wide text-accent-500">
  Stylized Text
</Text>

---

Semantic Tags

You can render any supported tag:

<Text tag="small" variant="textXS">Fine Print</Text>
<Text tag="a" href="/about" variant="textSM">About Us</Text>
<Text tag="h2" variant="displayLG">Section Title</Text>

Examples

---

Accessibility

The Text component supports semantic rendering for headings, links, and inline content, improving accessibility and SEO.

Best practices:

• Use heading tags (h1–h6) for structure
• Avoid skipping heading levels
• Use anchor tags (tag="a") for real links, not buttons
• Add aria-label when icons replace or obscure text