OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Text

Displays a basic text primitive.

Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.

 <Text>Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.</Text>

API Reference

Prop	Type	Default
`as`	`"span" \| "div" \| "p"`	`"span"`
`color`	`"gray" \| "purple" \| "blue" \| "green" \| "yellow" \| "red"`	`—`
`align`	`Responsive<"left" \| "center" \| "right">`	`—`
`size`	`Responsive<"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">`	`—`
`trim`	`Responsive<"normal" \| "start" \| "end" \| "both"`	`—`
`weight`	`Responsive<"normal" \| "bold">`	`—`
`highContrast`	`boolean`	`—`

This component is based on the span element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

As another element

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.

This is a span.

This is a div.

This is a paragraph.

 <Text as="span">This is a span.</Text>
<Text as="div">This is a div.</Text>
<Text as="p">This is a paragraph.</Text>

Colors

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.

Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.

 <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>

High contrast

Use the highContrast prop to use the highest contrast variant of the text color.

Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.

 <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>

Alignment

Use the align prop to set text alignment. You can change the alignment across breakpoints using the object syntax.

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>

Sizes

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.

Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.

 <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.

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.

Quick LookThird-party extensions

 <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>

Trim

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.

Without trimWith trim

 <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.

Without trim

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.

With trim

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">
  <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>

Weights

Use the weight prop to set the weight of the text. You can change the weight across breakpoints using the object syntax.

Ambiguous voice of a heart which prefers kiwi bowls to a zephyr.

 <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>

With formatting

Text component works in tandem with WorkDS formatting components.

Look, such a helpful link, an italic emphasis, a piece of computer code, and even a hotkey combination ⇧⌘A within the text.

 <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>