Text

Installation

npx axiom add text

pnpm dlx axiom add text

yarn dlx axiom add text

bun x axiom add text

Usage

import { Text } from '@/components/ui/text';

<Text>Your changes are saved automatically.</Text>
<Text variant="footnote" color="muted">Last synced 2 minutes ago</Text>
<Text variant="bodySm" color="error">Sync failed</Text>

Variants

variant sets the typography, color sets the meaning. Each variant points to a typography token.

Variant	Token	Size / line height · weight	Use for
`bodyLg`	`body`	17/22 · 400	Main reading text
`body`	`callout`	16/21 · 400	Default body text
`bodySm`	`subheadline`	15/20 · 400	List rows, descriptions
`footnote`	`footnote`	13/18 · 400	Helper text, metadata
`caption`	`caption`	12/16 · 400	Labels under images, timestamps

Colors

Color	Theme color	Use for
`default`	`content.default`	Regular text
`muted`	`content.muted`	Secondary text, descriptions
`subtle`	`content.subtle`	Captions, hints
`disabled`	`content.disabled`	Text of a disabled element
`inverse`	`content.inverse`	Text on an inverse background
`link`	`content.link`	Links and text actions
`success`	`feedback.success`	Confirmation messages
`warning`	`feedback.warning`	Warnings
`error`	`feedback.error`	Errors, validation messages

System text size

Text follows the text size set in the system settings (Dynamic Type on iOS, font size on Android). Running text has no cap: let it wrap and its container grow.

Inside components, MAX_FONT_SCALE caps the size through maxFontSizeMultiplier:

Cap	Value	Used by
`MAX_FONT_SCALE.control`	1.5	Labels of components that grow with their text: Button, Input, Chip, Segmented control
`MAX_FONT_SCALE.fixed`	1.2	Text inside a shape that keeps its size: Avatar initials, Badge, Calendar days, Input OTP cells

import { MAX_FONT_SCALE, Text } from "@/components/ui/text";

<Text numberOfLines={1} maxFontSizeMultiplier={MAX_FONT_SCALE.control}>
	Save
</Text>;

Props

Prop	Type	Default	Description
`variant`	`'bodyLg' \| 'body' \| 'bodySm' \| 'footnote' \| 'caption'`	`'body'`	Typography style. See Variants.
`color`	`'default' \| 'muted' \| 'subtle' \| 'disabled' \| 'inverse' \| 'link' \| 'success' \| 'warning' \| 'error'`	`'default'`	Theme color. See Colors.
`weight`	`'regular' \| 'medium' \| 'semibold' \| 'bold'`	from the variant	Overrides the variant’s weight, e.g. to highlight a word.
`align`	`'left' \| 'center' \| 'right'`	`'left'`	Text alignment.
`numberOfLines`	`number`	—	Truncates with an ellipsis after this many lines.
`asChild`	`boolean`	`false`	Passes the styles to the child instead of rendering a `Text`. See Slot.
`style`	`StyleProp<TextStyle>`	—	Extra styles, applied after the variant.

Text also accepts every React Native Text prop. A nested Text inherits the parent’s variant and color unless it sets its own.