Text

Every string in a Stratum UI should render through the Text atom rather than React Native’s bare <Text>, so typography always flows through the active theme. Three variants cover the standard mobile type roles.

When to use: Any non-heading text — body copy, metadata, form labels, navigation items, captions.

When not to use: Screen titles and section headers (use Heading).

Import

import { Text } from '@/components';

Usage

<Text variant="body" size="md">Main content paragraph.</Text>
<Text variant="caption" color="muted">Posted 3 hours ago</Text>
<Text variant="label" weight="semibold" color="accent">See all</Text>

Props

Prop	Type	Default	Description
`variant`	`'body' \| 'caption' \| 'label'`	`'body'`	Semantic text role
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	Variant default	Override the variant’s size
`weight`	`'regular' \| 'medium' \| 'semibold' \| 'bold'`	Variant default	Override the variant’s weight
`color`	`'primary' \| 'secondary' \| 'muted' \| 'accent' \| 'inverse' \| 'onAccent'`	`'primary'`	Semantic color slot
`children`	`ReactNode`	—	Text content (required)
`numberOfLines`	`number`	—	Truncate after N lines
`style`	`StyleProp<TextStyle>`	—	Additional styles (use sparingly)
`testID`	`string`	—	For testing

Variant defaults

Variant	Default size	Default weight	Typical use
`body`	`md` (15px)	`regular`	Reading copy, descriptions
`caption`	`xs` (11px)	`regular`	Timestamps, metadata, secondary lines
`label`	`sm` (13px)	`medium`	Form labels, nav items, UI controls

Variants

// Body — paragraph text, descriptions
<Text variant="body">Your invoice has been sent to alice@example.com.</Text>

// Caption — timestamps, secondary info, fine print
<Text variant="caption" color="muted">Last updated · 2 hours ago</Text>

// Label — UI control labels, form fields, navigation
<Text variant="label">Email address</Text>
<Text variant="label" weight="semibold" color="accent">View details ›</Text>

Colors

<Text color="primary">Default text color</Text>
<Text color="secondary">Supporting text (slightly dimmed)</Text>
<Text color="muted">Placeholder, timestamps, fine print</Text>
<Text color="accent">Links, CTAs, highlights</Text>
<Text color="inverse">Text on dark surfaces</Text>
<Text color="onAccent">Text inside accent-colored containers</Text>

Do / Don’t

Do: Use semantic color names — they update automatically across themes and light/dark modes.

<Text color="muted">Posted 3 hours ago</Text>

Don’t: Use style for color — it bypasses the theme.

// ✗
<Text style={{ color: '#999' }}>Posted 3 hours ago</Text>

Don’t: Use Text for screen or section titles — use Heading.

// ✗
<Text variant="body" weight="bold" size="lg">My Account</Text>
// ✓
<Heading level={2}>My Account</Heading>

Heading — screen titles and section headers
Icon — often paired with Text in list rows