File: text.md | Updated: 11/15/2025
ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors
Getting started Styling Layout Releases Resources
Overview Color Dark mode Typography Spacing Breakpoints Radius Shadows Cursors
Box Flex Grid Container Section
Text Heading Blockquote Code Em Kbd Link Quote Strong
Alert Dialog Aspect Ratio Avatar Badge Button Callout Card Checkbox Checkbox Group Checkbox Cards Context Menu Data List Dialog Dropdown Menu Hover Card Icon Button Inset Popover Progress Radio Radio Group Radio Cards Scroll Area Segmented Control Select Separator Skeleton Slider Spinner Switch Table Tabs Tab Nav Text Area Text Field Tooltip
Accessible Icon Portal Reset Slot Theme Visually Hidden
Components
Foundational text primitive.
View source Report an issue View in Playground
The quick brown fox jumps over the lazy dog.
<Text>The quick brown fox jumps over the lazy dog.</Text>
This component is based on the span element and supports common margin props
.
| Prop | Type | Default |
| --- | --- | --- |
| as<br><br>Prop description | "span" \| "div" \| "label" \| "p" | "span" |
| asChild<br><br>Prop description | boolean | No default value |
| size | Responsive<enum><br><br>See full type | No default value |
| weight | Responsive<"light" \| "regular" \| "medium" \| "bold"> | No default value |
| align<br><br>Prop description | Responsive<"left" \| "center" \| "right"> | No default value |
| trim<br><br>Prop description | Responsive<"normal" \| "start" \| "end" \| "both"> | No default value |
| truncate<br><br>Prop description | boolean | No default value |
| wrap<br><br>Prop description | Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance"> | No default value |
| color<br><br>Prop description | enum<br><br>See full type | No default value |
| highContrast<br><br>Prop description | boolean | No default value |
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.
This is a paragraph element.
This is a label element.
This is a div element.
This is a span element.
<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.
The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
<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.
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.
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.
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 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.
Get startedStart your next project in minutes
Get startedStart your next project in minutes
Get startedStart your next project in minutes
Get startedStart your next project in minutes
<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.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<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.
Left-aligned
Center-aligned
Right-aligned
<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.
Without trimWith trim
<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.
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 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.
<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>
The default trim values are configured for the system font stack that’s used by Radix Themes. If you are using custom fonts, you can adjust the trim values using the corresponding CSS variables.
.radix-themes {
--default-leading-trim-start: 0.42em;
--default-leading-trim-end: 0.36em;
--heading-leading-trim-start: 0.42em;
--heading-leading-trim-end: 0.36em;
}
Use the truncate prop to truncate text with an ellipsis when it overflows its container.
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.
<Flex maxWidth="300px">
<Text truncate>
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>
</Flex>
Use the wrap prop to control text wrapping.
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.
<Flex maxWidth="270px">
<Text wrap="nowrap">
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>
</Flex>
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.
<Flex maxWidth="270px">
<Text wrap="balance">
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>
</Flex>
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.
<Flex maxWidth="270px">
<Text wrap="pretty">
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>
</Flex>
text-wrap: pretty is an experimental value that is not yet supported in all browsers
. However, it can be treated as a progressive enhancement for browsers that do support it.
Use the color prop to assign a specific color
. The text colors are designed to achieve at least Lc 60 APCA contrast over common background colors.
The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
<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.
The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
<Flex direction="column">
<Text color="gray">The quick brown fox jumps over the lazy dog.</Text>
<Text color="gray" highContrast>
The quick brown fox jumps over the lazy dog.
</Text>
</Flex>
Compose Text with formatting components to add emphasis and structure to content.
Look, such a helpful link
, an italic emphasis, a piece of computer code, and even a hotkey combination ⇧⌘A within the text.
<Text as="p">
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.
I understand that these documents are confidential and cannot be shared with a third party.
<Box maxWidth="300px">
<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>
PreviousSection
NextHeading