Overview

UsageComing soon

Layout

Box

ContainerComing soon

Flex

Grid

SectionComing soon

Typography

Components

BlockquoteComing soon

ComboboxComing soon

JSON Path SelectorComing soon

ZoomableComing soon

Formatting

CodeComing soon

EmComing soon

KbdComing soon

QuoteComing soon

StrongComing soon

Icons

Logo IconComing soon

Feature IconComing soon

Provider Icon

Icon Panel

Navigation

Page NavComing soon

Quick NavComing soon

Utilities

DS ProviderComing soon

Recipes

Copy Button

Copy Chip

Theme Toggle

Text

Displays a basic text primitive.

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

Props

No props data available for Text.

Usage

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.

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

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

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

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

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

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.

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

Weights

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>

With formatting

Text component works in tandem with WorkDS formatting components.

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

Variants

Context

Usage

Used 2489 times across 2 packages

Dashboard

2163

Admin Portal

326

Variant Distribution

align

center

86%

right

11%

left

color

gray

74%

red

25%

green

purple

yellow

size

10%

82%

weight

bold

83%

medium

13%

regular

light

wrap

nowrap

85%

pretty

15%

trim

both

73%

start

16%

end

11%

truncate

true

100%

highContrast

true

100%

Where it's used

605 files

packages/dashboard/src/components/billing/invoice-card.stories.tsx64

packages/dashboard/src/components/get-started/get-started.tsx30

packages/dashboard/src/legacy-pages/settings/billing.tsx28

packages/dashboard/src/components/authentication/configure-email-password-dialog.tsx25

packages/dashboard/src/components/emails/providers/configure-custom-email-provider-dialog.tsx25

packages/dashboard/src/components/emails/providers/manage-custom-email-provider-dialog.tsx25

packages/dashboard/src/components/log-streams/log-stream-destination-azure-sentinel.tsx24

packages/dashboard/src/components/log-streams/log-stream-destination-s3.tsx24

/branding/edit

packages/dashboard/src/app/(private)/(chromeless)/branding/edit/edit-branding.tsx27

/p/:portalSessionId/sso/:connectionId/verification/failed/:sessionId

packages/admin-portal/src/app/p/[portalSessionId]/sso/[connectionId]/verification/failed/[sessionId]/session-error-callout.tsx20

Show 595 more files

Text

On this page

Props

Usage

As another element

Colors

High contrast

Alignment

Sizes

Trim

Weights

With formatting

Variants

Context

Usage Statistics

Usage

Variant Distribution

Where it's used