Text

The Text component renders body text with configurable size and color variants.

Preview

Large text

Base text (default)

Small text

Extra small text

---

Muted text

Import

import { Text } from 'meridian';

Props

Prop	Type	Default	Description
inline	boolean	—	Render as span instead of paragraph
muted	boolean	—	Whether to use muted color
size	"base" | "xs" | "sm" | "lg"	base	Font size variant

Usage

Basic

<Text>This is body text.</Text>

Sizes

Use the size prop to adjust text size:

<Text size="lg">Large text for emphasis</Text>
<Text size="base">Base text (default)</Text>
<Text size="sm">Small text for secondary content</Text>
<Text size="xs">Extra small for captions</Text>

Sizes

Large text (16px)

Base text (14px)

Small text (12px)

Extra small (11px)

Muted Text

Use the muted prop for secondary or de-emphasized content:

<Text>Primary content</Text>
<Text muted>Secondary description or helper text</Text>

Muted

Primary content

Secondary description or helper text

Inline Text

Use the inline prop to render as a <span> instead of <p>:

<p>
  This is regular text with <Text inline muted>inline muted text</Text> in the middle.
</p>

Combining Props

<Text size="sm" muted>
  Last updated: January 14, 2026
</Text>

Combined

Last updated: January 14, 2026

Use Cases

// Card description
<Text size="sm">All systems nominal. No anomalies detected.</Text>

// Timestamp
<Text size="xs" muted>2 hours ago</Text>

// Helper text
<Text size="sm" muted>Enter your email to receive updates.</Text>