Text

Versatile text component with size, weight, and color props.

Text

Text is the primary typography component for rendering text content with consistent styling.

Import

import { Text } from 'radix-native-ui';

Usage

import { Text } from 'radix-native-ui';

<Text size={3}>Hello, World!</Text>

Props

Examples

Sizes

<Text size={1}>Size 1 - Smallest</Text>
<Text size={2}>Size 2</Text>
<Text size={3}>Size 3 - Default</Text>
<Text size={4}>Size 4</Text>
<Text size={5}>Size 5</Text>
<Text size={6}>Size 6</Text>
<Text size={7}>Size 7</Text>
<Text size={8}>Size 8</Text>
<Text size={9}>Size 9 - Largest</Text>

Weights

<Text weight="light">Light weight</Text>
<Text weight="regular">Regular weight</Text>
<Text weight="medium">Medium weight</Text>
<Text weight="bold">Bold weight</Text>

Colors

<Text color="gray">Gray text</Text>
<Text color="blue">Blue text</Text>
<Text color="red">Red text</Text>
<Text color="green">Green text</Text>

Alignment

<Text align="left">Left aligned</Text>
<Text align="center">Center aligned</Text>
<Text align="right">Right aligned</Text>

Truncation

<Text truncate>
  This is a very long text that will be truncated with ellipsis...
</Text>

<Text numberOfLines={2}>
  This text will be limited to two lines and truncated if it exceeds that...
</Text>

Decorations

<Text textDecorationLine="underline">Underlined text</Text>
<Text textDecorationLine="line-through">Strikethrough text</Text>

Combined Styles

<Text size={4} weight="bold" color="blue" align="center">
  Styled text
</Text>

With Icon

<Flex align="center" gap={2}>
  <Icon name="info" />
  <Text>Text with icon</Text>
</Flex>

Related

• Heading - Heading component
• Strong - Bold text
• Em - Italic text