Text

The Text component is a fundamental building block for typography. It supports multiple text styles, sizes, and semantic variations to accommodate different design contexts.

Import

import { Text } from '@oztix/roadie-components'

Examples

Default

<Text>Hello World</Text>

Semantic Text Styles

Use semantic text styles for consistent typography across the application.

<View gap="300">
  {/* UI Text Styles */}
  <View gap="200">
    <Text textStyle="ui">Default UI text</Text>
    <Text textStyle="ui.meta">Meta UI text</Text>
  </View>

  {/* Prose Text Styles */}
  <View gap="200">
    <Text textStyle="prose">Default prose text</Text>
    <Text textStyle="prose.lead">Lead prose text</Text>
  </View>
</View>

Font Sizes

Font sizes are responsive and will scale based on the screen size.

<View gap='100'>
  <Text fontSize='xs'>XSmall</Text>
  <Text fontSize='sm'>Small</Text>
  <Text fontSize='md'>Medium</Text>
  <Text fontSize='lg'>Large</Text>
  <Text fontSize='xl'>XLarge</Text>
  <Text fontSize='2xl'>2XLarge</Text>
  <Text fontSize='3xl'>3XLarge</Text>
  <Text fontSize='4xl'>4XLarge</Text>
  <Text fontSize='5xl'>5XLarge</Text>
  <Text fontSize='6xl'>6XLarge</Text>
  <Text fontSize='7xl'>7XLarge</Text>
</View>

Emphasis

Use emphasis to create a subtle or strong text color:

<View gap='200'>
  <Text>Default text</Text>
  <Text emphasis='subtler'>Subtler text</Text>
  <Text emphasis='subtle'>Subtle text</Text>
  <Text emphasis='strong'>Strong text</Text>
</View>

Use in conjunction with colorPalette to create a subtle or strong text color:

<View
  display='grid'
  gap='200'
  gridTemplateColumns={{ base: '1fr', md: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }}
>
  <View gap='100'>
    <Text colorPalette='accent' emphasis='subtler'>Subtler accent text</Text>
    <Text colorPalette='accent' emphasis='subtle'>Subtle accent text</Text>
    <Text colorPalette='accent'>Accent text</Text>
    <Text colorPalette='accent' emphasis='strong'>Strong accent text</Text>
  </View>
  <View gap='100'>
    <Text colorPalette='brand' emphasis='subtler'>Subtler brand text</Text>
    <Text colorPalette='brand' emphasis='subtle'>Subtle brand text</Text>
    <Text colorPalette='brand'>Brand text</Text>
    <Text colorPalette='brand' emphasis='strong'>Strong brand text</Text>
  </View>
  <View gap='100'>
    <Text colorPalette='information' emphasis='subtler'>Subtler information text</Text>
    <Text colorPalette='information' emphasis='subtle'>Subtle information text</Text>
    <Text colorPalette='information'>Information text</Text>
    <Text colorPalette='information' emphasis='strong'>Strong information text</Text>
  </View>
  <View gap='100'>
    <Text colorPalette='success' emphasis='subtler'>Subtler success text</Text>
    <Text colorPalette='success' emphasis='subtle'>Subtle success text</Text>
    <Text colorPalette='success'>Success text</Text>
    <Text colorPalette='success' emphasis='strong'>Strong success text</Text>
  </View>
  <View gap='100'>
    <Text colorPalette='warning' emphasis='subtler'>Subtler warning text</Text>
    <Text colorPalette='warning' emphasis='subtle'>Subtle warning text</Text>
    <Text colorPalette='warning'>Warning text</Text>
    <Text colorPalette='warning' emphasis='strong'>Strong warning text</Text>
  </View>
  <View gap='100'>
    <Text colorPalette='danger' emphasis='subtler'>Subtler danger text</Text>
    <Text colorPalette='danger' emphasis='subtle'>Subtle danger text</Text>
    <Text colorPalette='danger'>Danger text</Text>
    <Text colorPalette='danger' emphasis='strong'>Strong danger text</Text>
  </View>
</View>

Colors

Use semantic color tokens for consistent text colors:

<View gap="200">
  <Text colorPalette="neutral">Default text</Text>
  <Text colorPalette="accent">Accent text</Text>
  <Text colorPalette="success">Success text</Text>
  <Text colorPalette="warning">Warning text</Text>
  <Text colorPalette="danger">Error text</Text>
</View>

Interactive

Text can be rendered as interactive using the interactive prop:

<Text colorPalette='accent' interactive={true}>Interactive text</Text>

Custom elements

Text can be rendered as any HTML element or component using the as prop:

<View gap="200">
  <Text as="span">Inline text (default)</Text>
  <Text as="p">Paragraph text</Text>
  <Text as="label">Label text</Text>
</View>