Skip to content

Overview

The <x-aura::text> component renders body text with consistent typographic styling. It supports multiple sizes, semantic color variants, font weights, and configurable HTML tags. Use it as a building block for descriptions, paragraphs, labels, and inline text throughout your application.

Use text for:

  • Paragraphs and descriptions
  • Helper text and captions
  • Colored status messages
  • Inline labels and annotations

Basic Usage

This is a paragraph of body text.

<x-aura::text>This is a paragraph of body text.</x-aura::text>

Props

Prop Type Default Description
size string 'base' Font size: xs, sm, base, lg, xl
color string 'default' Text color: default, muted, subtle, primary, success, danger, warning
weight string 'normal' Font weight: light, normal, medium, semibold, bold
as string 'p' HTML tag to render: p, span, div

Variants / Examples

Color Variants

Default body text.

Muted secondary text.

Subtle helper text.

Primary accent text.

Success message text.

Error message text.

<x-aura::text color="default">Default body text.</x-aura::text>
<x-aura::text color="muted">Muted secondary text.</x-aura::text>
<x-aura::text color="subtle">Subtle helper text.</x-aura::text>
<x-aura::text color="primary">Primary accent text.</x-aura::text>
<x-aura::text color="success">Success message text.</x-aura::text>
<x-aura::text color="danger">Error message text.</x-aura::text>

Size and Weight

Small medium text

Large semibold text

<x-aura::text size="sm" weight="medium">Small medium text</x-aura::text>
<x-aura::text size="lg" weight="semibold">Large semibold text</x-aura::text>

Inline Text with span

Your plan is Pro . 

<p>
    Your plan is
    <x-aura::text as="span" color="primary" weight="semibold">Pro</x-aura::text>.
</p>

Description Below a Heading

Dashboard

Overview of your recent activity and stats.

<x-aura::heading :level="2">Dashboard</x-aura::heading>
<x-aura::text color="muted" class="mt-1">Overview of your recent activity and stats.</x-aura::text>

Accessibility

  • The component renders semantic HTML tags (p, span, or div), ensuring proper content structure.
  • Color is used to convey emphasis, but text content remains readable and meaningful regardless of color variant.
  • The leading-relaxed line height improves readability for longer text passages.