Components / Typography

Text

Text is the typographic atom. It renders a <span> and carries the whole style-prop catalogue — every other text primitive is a Text with a semantic tag and a default style bag.

Loading playground…

What it is

A <Box as="span">. TextProps is BoxProps unchanged — there is no separate text-only prop set. Reach for the standard style props (fontSize, fontWeight, color, lineHeight, letterSpacing) to vary the type.

Install

Text is exported from usemotif. No separate install.

example.tsx

import { Text } from 'usemotif';

API

Text

stable

function Text(props: TextProps): JSX.Element

asElementType= "span"

Element to render. Override for semantic block-level text — `as="p"`, `as="label"`, `as="strong"`.

…BoxPropsBoxProps

Every prop Box accepts. `TextProps` is a direct alias of `BoxProps`.

Examples

Inline styled text:

example.tsx

<Text fontSize="$md" color="$colors.text.muted">
Muted helper copy.
</Text>

Render as a semantic element:

example.tsx

<Text as="strong" fontWeight="$bold">
Renders a <strong>, not a <span>.
</Text>

Responsive font size:

example.tsx

<Text fontSize={{ base: '$sm', md: '$md', lg: '$lg' }}>
Scales up with the viewport.
</Text>

Cross-platform notes

On web Text renders a <span> (or whatever as names). On native it renders a React Native <Text>; the as prop is ignored, since native text has no tag variants. Style props resolve through the same token tree on both platforms.