Typography
Overview
Text
Label
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.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
tsxCopied1const markdownString = `## This is a markdown h22The Text component also automatically parses markdown text.3`;4return (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>13Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut14labore et dolore magna aliqua.15</Text>16<Text>{markdownString}</Text>17</>18);
Text component API
Text content.
Text color
Disables automatic markdown parsing
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
Adds font-style: italic
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.
Text size.
Add strikethrough style
Underline the text
Controls the font weight.
Heading component API
Heading content.
Heading color.
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
Adds italic style.
The size and style of the Heading with 1 being the largest and 6 being the smallest.
Adds strikethrough style.
Adds underline style.
Controls the font weight.