TextSpan

Beta

Inline text-group container that shares style context with nested Typography.

Installation

npm install @xaui/native

Import

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

Basic Usage

Minimal example showing the component with its default configuration.

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

export function Example() {
  return (
    <TextSpan>
      {/* children */}
    </TextSpan>
  )
}

Basic

Group text nodes and keep consistent spacing/alignment.

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

export function TextSpanBasicExample() {
  return (
    <TextSpan spacing={8} align="justify">
      <Typography>Order total:</Typography>
      <Typography variant="titleSmall">$24.99</Typography>
    </TextSpan>
  )
}

Inherited Text Styles

Apply shared text styles to nested Typography elements.

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

export function TextSpanInheritedStyleExample() {
  return (
    <TextSpan color="#1d4ed8" fontWeight="700" textTransform="uppercase" spacing={6}>
      <Typography variant="caption">status</Typography>
      <Typography variant="bodyMedium">active</Typography>
    </TextSpan>
  )
}