A foundational text primitive.
<Text>The quick brown fox jumps over the lazy dog.</Text>
This component is based on the span element and supports common margin props.
Use the as prop to render text as a p, label, div or span. This prop is purely semantic and does not alter visual appearance.
<Text as="p">This is a <Strong>paragraph</Strong> element.</Text>
<Text as="label">This is a <Strong>label</Strong> element.</Text>
<Text as="div">This is a <Strong>div</Strong> element.</Text>
<Text as="span">This is a <Strong>span</Strong> element.</Text>
Use the size prop to control text size. This prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.
<Flex direction="column" gap="3">
<Text size="1">The quick brown fox jumps over the lazy dog.</Text>
<Text size="2">The quick brown fox jumps over the lazy dog.</Text>
<Text size="3">The quick brown fox jumps over the lazy dog.</Text>
<Text size="4">The quick brown fox jumps over the lazy dog.</Text>
<Text size="5">The quick brown fox jumps over the lazy dog.</Text>
<Text size="6">The quick brown fox jumps over the lazy dog.</Text>
<Text size="7">The quick brown fox jumps over the lazy dog.</Text>
<Text size="8">The quick brown fox jumps over the lazy dog.</Text>
<Text size="9">The quick brown fox jumps over the lazy dog.</Text>
</Flex>
Sizes 2–4 are designed to work well for long-form content.
<Text as="p" mb="5" size="4">
The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.
</Text>
<Text as="p" mb="5" size="3">
The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.
</Text>
<Text as="p" size="2" color="gray">
The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.
</Text>
Sizes 1–3 are designed to work well for UI labels.
<Grid align="center" columns="2" gap="5" p="3">
<Flex direction="column">
<Text size="3" weight="bold">
Get started
</Text>
<Text color="gray" size="2">
Start your next project in minutes
</Text>
</Flex>
<Flex direction="column">
<Text size="2" weight="bold">
Get started
</Text>
<Text color="gray" size="2">
Start your next project in minutes
</Text>
</Flex>
<Flex direction="column">
<Text size="2" weight="bold">
Get started
</Text>
<Text color="gray" size="1">
Start your next project in minutes
</Text>
</Flex>
<Flex direction="column">
<Text size="1" weight="bold">
Get started
</Text>
<Text color="gray" size="1">
Start your next project in minutes
</Text>
</Flex>
</Grid>
Use the weight prop to set the text weight.
<Text weight="regular" as="div">
The quick brown fox jumps over the lazy dog.
</Text>
<Text weight="medium" as="div">
The quick brown fox jumps over the lazy dog.
</Text>
<Text weight="bold" as="div">
The quick brown fox jumps over the lazy dog.
</Text>
Use the align prop to set text alignment.
<Text align="left" as="div">Left-aligned</Text>
<Text align="center" as="div">Center-aligned</Text>
<Text align="right" as="div">Right-aligned</Text>
Use the trim prop to trim the leading space at the start, end, or both sides of the text box.
The prop works similarly to the upcoming half-leading control spec, but uses a common negative margin workaround under the hood for cross-browser support.
<Flex direction="column" gap="3">
<Text
trim="normal"
style={{
background: 'var(--gray-a2)',
borderTop: '1px dashed var(--gray-a7)',
borderBottom: '1px dashed var(--gray-a7)',
}}
>
Without trim
</Text>
<Text
trim="both"
style={{
background: 'var(--gray-a2)',
borderTop: '1px dashed var(--gray-a7)',
borderBottom: '1px dashed var(--gray-a7)',
}}
>
With trim
</Text>
</Flex>
Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, padding looks larger on top and bottom than on the sides.
<Flex direction="column" gap="3">
<Box
style={{
background: 'var(--gray-a2)',
border: '1px dashed var(--gray-a7)',
}}
p="4"
>
<Heading mb="1" size="3">
Without trim
</Heading>
<Text>
The goal of typography is to relate font size, line height, and line width
in a proportional way that maximizes beauty and makes reading easier and
more pleasant.
</Text>
</Box>
<Box
p="4"
style={{
background: 'var(--gray-a2)',
border: '1px dashed var(--gray-a7)',
}}
>
<Heading mb="1" size="3" trim="start">
With trim
</Heading>
<Text trim="end">
The goal of typography is to relate font size, line height, and line width
in a proportional way that maximizes beauty and makes reading easier and
more pleasant.
</Text>
</Box>
</Flex>
Use the color prop to assign a specific color, ignoring the global theme. The text colors are designed to achieve at least Lc 60 APCA contrast over common background colors.
<Flex direction="column">
<Text color="indigo">The quick brown fox jumps over the lazy dog.</Text>
<Text color="cyan">The quick brown fox jumps over the lazy dog.</Text>
<Text color="orange">The quick brown fox jumps over the lazy dog.</Text>
<Text color="crimson">The quick brown fox jumps over the lazy dog.</Text>
</Flex>
Use the highContrast prop to increase color contrast with the background.
<Flex direction="column">
<Text highContrast color="indigo">
The quick brown fox jumps over the lazy dog.
</Text>
<Text highContrast color="cyan">
The quick brown fox jumps over the lazy dog.
</Text>
<Text highContrast color="orange">
The quick brown fox jumps over the lazy dog.
</Text>
<Text highContrast color="crimson">
The quick brown fox jumps over the lazy dog.
</Text>
</Flex>
Compose Text with formatting components to add emphasis and structure to content.
<Text size="5">
Look, such a helpful <Link href="#">link</Link>, an <Em>italic emphasis</Em>,
a piece of computer <Code>code</Code>, and even a hotkey combination{' '}
<Kbd>⇧⌘A</Kbd> within the text.
</Text>
Composing Text with a form control like Checkbox, RadioGroup, or Switch automatically centers the control with the first line of text, even when the text is multi-line.
<Box style={{ maxWidth: 300 }}>
<Text as="label" size="3">
<Flex gap="2">
<Checkbox defaultChecked /> I understand that these documents are
confidential and cannot be shared with a third party.
</Flex>
</Text>
</Box>