Text

<Text variant="display-3">Design system</Text>

The Reshaped type scale includes various styles that support both expressive and application font sizes. Each style is represented by font size, line-height, font-weight, and font-family values. All these values come from the design tokens defined in the theme.

<View>
  <Text variant="display-1">Display 1</Text>
  <Text variant="display-2">Display 2</Text>
  <Text variant="display-3">Display 3</Text>
  <Text variant="featured-1">Featured 1</Text>
  <Text variant="featured-2">Featured 2</Text>
  <Text variant="featured-3">Featured 3</Text>
  <Text variant="title-1">Title 1</Text>
  <Text variant="title-2">Title 2</Text>
  <Text variant="title-3">Title 3</Text>
  <Text variant="body-strong-1">Body strong 1</Text>
  <Text variant="body-strong-2">Body strong 2</Text>
  <Text variant="body-medium-1">Body medium 1</Text>
  <Text variant="body-medium-2">Body medium 2</Text>
  <Text variant="body-1">Body 1</Text>
  <Text variant="body-2">Body 2</Text>
  <Text variant="caption-1">Caption 1</Text>
  <Text variant="caption-2">Caption 2</Text>
</View>

Note: It's better to read this part of documentation from desktop screens and try resizing the screen to see how typography behaves for every viewport size

Display from 1 to 3 are the biggest typefaces. They are mainly used for marketing materials or landing pages, rather than applications UI. They can be paired together with subtitles of the same variant number.

<View>
  <Text variant="display-2">Line 1</Text>
  <Text variant="featured-2">Line 2</Text>
</View>

body-strong, body-medium, and body variants of the Text component are used for displaying long-form writing with the chosen font-weight. Each of them comes in ranges 1-2, which is related to the size of the typeface, where one is bigger than 2. Default typeface is body-2.

These smaller typefaces can also be used as subtitles for title 4-6 typefaces.

<View>
  <Text variant="title-1">Line 1</Text>
  <Text variant="body-1">Line 2</Text>
</View>

Text component comes with a color property that lets you use design token values.

<View>
  <Text>Neutral</Text>
  <Text color="neutral-faded">Neutral faded</Text>
  <Text color="positive">Safe</Text>
  <Text color="critical">Danger</Text>
  <Text color="primary">Primary</Text>
  <Text color="disabled">Disabled</Text>
</View>

Text can be truncated with the maxLines property:

<View width="200px">
  <Text variant="body-2" maxLines={2}>
    Reshaped is a professionally crafted design system for product design and
    development teams and individuals. We provide with core components you would
    need in every project, focusing on accessibility, scalable component
    customization and development experience.
  </Text>
</View>

You can decorate Text with line-through by using the decoration property.

<Text variant="body-medium-2" decoration="line-through">
  $150
</Text>