Text

Typography

I am the default font size default to b2

I am s1

function TextUsage() {
  return (
    <View>
      <Text>I am the default font size default to b2</Text>
      <Text typography="s1">I am s1</Text>
    </View>
  )
}

All Typographies

This is h1 Text

This is h2 Text

This is h3 Text

This is h4 Text

This is h5 Text

This is h6 Text

This is s1 Text

This is s2 Text

This is b1 Text

This is b2 Text

This is b3 Text

This is l1 Text

This is l2 Text

This is c1 Text

This is c2 Text

Status

This is text with primary status

This is text with accent status

This is text with success status

This is text with info status

This is text with warning status

This is text with error status

function TextStatuses() {
  return (
    <View>
      <Text status="primary">This is text with primary status</Text>
      <Text status="accent">This is text with accent status</Text>
      <Text status="success">This is text with success status</Text>
      <Text status="info">This is text with info status</Text>
      <Text status="warning">This is text with warning status</Text>
      <Text status="error">This is text with error status</Text>
    </View>
  )
}

Custom Texts

This is Long text with font size

function TextCustom() {
  return (
    <View>
      <Text
        style={{
          fontSize: 30,
          color: 'green',
        }}>
        This is Long text with font size
      </Text>
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	TextProps$1	--	Inherits properties from TextProps$1
typography	TypographyOptions	b2	Typography option to control the size of the text