Text

Render custom text in your app

Introduction

The <Text> component is used to render text in your app. It lets you easily display and customize your text content.

Basic usage

To use the <Text> component, you can just include it in your app and pass the text you want to display as a child of the component.

import { Text } from '@latitude-data/react'

const MyComponent = () => (
  <Text>
    Hello, world!
  </Text>
)

You can use our scale of predefined styles to quickly customize your text. Here’s an example:

import { Text } from '@latitude-data/react'

const MyComponent = () => (
  <Text.H1>
    Hello, world!
  </Text.H1>
)

This will also render the text as a <h1> tag.

These are the predefined styles available for the <Text> component, along with their corresponding font size and line height:

Style	Settings
H1	Font size 36px, Line height 48px
H2	Font size 26px, Line height 40px
H3	Font size 20px, Line height 32px
H4	Font size 16px, Line height 24px
H5	Font size 14px, Line height 20px
H6	Font size 12px, Line height 16px

Advanced usage

Apart from the predefined styles, you can also customize the text using the following properties:

color · string

Sets the color of the text. Options are: primary, secondary, destructive, accent, background, foreground, link, inherit.

size · string

Sets the size of the text. Options are: h1, h2, h3, h4, h5, h6.

family · string

Sets the font family of the text. Options are: sans, mono.

weight · string

Sets the font weight of the text. Options are: normal, medium, semibold, bold.

spacing · string

Sets the letter spacing of the text. Options are: normal, wide.

align · string

Sets the text alignment. Options are: left, center, right.

wordBreak · string

Sets the word break behavior. Options are: normal, breakWord, breakAll.

whiteSpace · string

Sets the white space behavior. Options are: normal, nowrap, pre, preLine, preWrap.

Here’s an example of how you can use these properties:

import { Text } from '@latitude-data/react'

const MyComponent = () => (
<Text
  color="primary"
  size="h1"
  family="sans"
  weight="bold"
  spacing="wide"
  align="center"
  wordBreak="breakAll"
  whiteSpace="preWrap"
>
  Hello, world!
</Text>