Typography

Stable

Text primitive with variant-based typographic styles.

Installation

npm install @xaui/native

Import

import { Typography } from '@xaui/native/typography'

Basic Usage

Minimal example showing the component with its default configuration.

import { Typography } from '@xaui/native/typography'

export function Example() {
  return <Typography />
}

Variants

Use variant to apply the correct typographic scale.

import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

export function TypographyVariantsExample() {
  return (
    <View>
      <Typography variant="displayLarge">Display Large</Typography>
      <Typography variant="displayMedium">Display Medium</Typography>
      <Typography variant="displaySmall">Display Small</Typography>
      <Typography variant="headlineLarge">Headline Large</Typography>
      <Typography variant="headlineMedium">Headline Medium</Typography>
      <Typography variant="headlineSmall">Headline Small</Typography>
      <Typography variant="subtitleLarge">Subtitle Large</Typography>
      <Typography variant="subtitleMedium">Subtitle Medium</Typography>
      <Typography variant="subtitleSmall">Subtitle Small</Typography>
      <Typography variant="bodyLarge">Body Large</Typography>
      <Typography variant="bodyMedium">Body Medium</Typography>
      <Typography variant="bodySmall">Body Small</Typography>
      <Typography variant="caption">Caption</Typography>
    </View>
  )
}

Theme Colors

Apply a theme color to the text.

import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

export function TypographyColorsExample() {
  return (
    <View>
      <Typography themeColor="primary">Primary color</Typography>
      <Typography themeColor="success">Success color</Typography>
      <Typography themeColor="danger">Danger color</Typography>
      <Typography themeColor="warning">Warning color</Typography>
    </View>
  )
}

Text Truncation

Limit lines and control overflow behavior.

import { Typography } from '@xaui/native/typography'

export function TypographyTruncationExample() {
  return (
    <Typography variant="bodyMedium" maxLines={2} overflow="ellipsis">
      This is a very long text that will be truncated after two lines with an
      ellipsis at the end to indicate that there is more content available.
    </Typography>
  )
}

Alignment

Control text alignment within the container.

import { Typography } from '@xaui/native/typography'
import { View } from 'react-native'

export function TypographyAlignmentExample() {
  return (
    <View>
      <Typography align="left">Left aligned</Typography>
      <Typography align="center">Center aligned</Typography>
      <Typography align="right">Right aligned</Typography>
      <Typography align="justify">Justified text that spans multiple lines to demonstrate justify alignment behavior.</Typography>
    </View>
  )
}