Displays a basic text primitive.
<Text>Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.</Text>
This component is based on the span element and supports common margin props m, mx, my, ml, mr, mt, mb. View source
Use the as prop to render text as a div or paragraph. This prop is purely semantic and does not change the visual appearance of the text.
<Text as="span">This is a span.</Text> <Text as="div">This is a div.</Text> <Text as="p">This is a paragraph.</Text>
Use the color prop to control the color of the text. The colors are accessible over the canvas color and over steps 1 and 2 of the color scales.
<Text as="p" color="gray"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text as="p" color="purple"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text as="p" color="blue"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text as="p" color="green"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text as="p" color="yellow"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text as="p" color="red"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text>
Use the highContrast prop to use the highest contrast variant of the text color.
<Text as="p" color="gray" highContrast> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text as="p" color="purple" highContrast> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text as="p" color="blue" highContrast> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text as="p" color="green" highContrast> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text as="p" color="yellow" highContrast> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text as="p" color="red" highContrast> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text>
Use the align prop to set text alignment. You can change the alignment across breakpoints using the object syntax.
<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 size prop to control the size of the text. The prop also provides correct line height and corrective letter spacing – as text size increases, the relative line height and letter spacing decrease.
You can change the size across breakpoints using the object syntax.
<Flex direction="column" gap="3" width="max-content"> <Text size="9"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text size="8"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text size="7"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text size="6"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text size="5"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text size="4"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text size="3"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text size="2"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text size="1"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </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="6" p="4"> <Flex direction="column"> <Text size="3" weight="bold"> Quick Look </Text> <Text color="gray" size="2"> Third-party extensions </Text> </Flex> <Flex direction="column"> <Text size="2" weight="bold"> Quick Look </Text> <Text color="gray" size="2"> Third-party extensions </Text> </Flex> <Flex direction="column"> <Text size="2" weight="bold"> Quick Look </Text> <Text color="gray" size="1"> Third-party extensions </Text> </Flex> <Flex direction="column"> <Text size="1" weight="bold"> Quick Look </Text> <Text color="gray" size="1"> Third-party extensions </Text> </Flex> </Grid>
Use the trim prop to trim the leading space at the start, end, or both sides of the text box. You can change the leading trim across breakpoints using the object syntax.
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(--blue-a5)' }}> Without trim </Text> <Text trim="both" style={{ background: 'var(--blue-a5)' }}> With trim </Text> </Flex>
Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, the card padding looks larger on top and bottom than on the sides.
<Flex direction="column" gap="3"> <Card size="3"> <Heading mb="1" size="3"> Without trim </Heading> <Text as="p"> 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> </Card> <Card size="3"> <Heading mb="1" size="3" trim="start"> With trim </Heading> <Text as="p" 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> </Card> </Flex>
Use the weight prop to set the weight of the text. You can change the weight across breakpoints using the object syntax.
<Text as="p" weight="regular"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text> <Text as="p" weight="bold"> Ambiguous voice of a heart which prefers kiwi bowls to a zephyr. </Text>