Typography

Overview
Airplane provides the following components for typesetting UI in your views:
  1. Text
  2. Label
  3. Title

Text
Text is the primary component for rendering text in Views.
Text provides several props to control the appearance and size of the text, which help keep the text in your views consistent. Text also automatically adds spacing between paragraphs to improve readability. By default, Text automatically parses Markdown text if a Markdown string is passed to it.

Label
Label is like Text but without any additional spacing and without Markdown support. Use Label when you want to render text that is not intended to be read as a paragraph. For example, you may want to use Label to render a label for a custom form field.

Heading
Heading renders headings for your views. The Heading component's level prop can be an integer 1 to 6 that corresponds to the <h1> to <h6> HTML elements.
Note that Heading components can be nested inside a Text component. This is particularly desirable if you want to group certain titles with a body of text.

Example usage

 
tsx
Copied
1
const markdownString = `## This is a markdown h2
2
The Text component also automatically parses markdown text.
3
`;
4
return (
5
  <>
6
    <Heading level={1}>Heading 1</Heading>
7
    <Heading level={2}>Heading 2</Heading>
8
    <Heading level={3}>Heading 3</Heading>
9
    <Heading level={4}>Heading 4</Heading>
10
    <Heading level={5}>Heading 5</Heading>
11
    <Heading level={6}>Heading 6</Heading>
12
    <Text>
13
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
14
      labore et dolore magna aliqua.
15
    </Text>
16
    <Text>{markdownString}</Text>
17
  </>
18
);

Text component API
children
REQUIRED
React.ReactNode

Text content.

color
optional
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}`

Text color

disableMarkdown
optional
boolean

Disables automatic markdown parsing

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
default: auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
italic
optional
boolean

Adds font-style: italic

lineClamp
optional
number

The maximum number of lines to clamp to. If set, only this number of lines will be shown, and the text will appear truncated with a trailing ellipsis.

size
optional
default: md
"xs" | "sm" | "md" | "lg" | "xl"

Text size.

strikethrough
optional
boolean

Add strikethrough style

underline
optional
boolean

Underline the text

weight
optional
"light" | "normal" | "medium" | "semibold" | "bold"

Controls the font weight.

width
optional
default: auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.

Heading component API
children
REQUIRED
React.ReactNode

Heading content.

color
optional
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}`

Heading color.

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
default: auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
italic
optional
boolean

Adds italic style.

level
optional
default: 1
1 | 2 | 3 | 4 | 5 | 6

The size and style of the Heading with 1 being the largest and 6 being the smallest.

strikethrough
optional
boolean

Adds strikethrough style.

underline
optional
boolean

Adds underline style.

weight
optional
"light" | "normal" | "medium" | "semibold" | "bold"

Controls the font weight.

width
optional
default: auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.
PrivacyTermsSupport