Text

The Text component helps you style text with design system tokens.

Figma Library View in Storybook View in Playroom API Reference

Quick Start

Installation: npm install @adaptavant/eds-core
Import: import { Text } from '@adaptavant/eds-core';
Added: 1.0.0

Basic Usage

Text styles content with Tailwind utility classes passed to className. The fontWeight, lineClamp, textAlign, textTransform, tone, and typography props are deprecated — always reach for a utility class below instead of a prop, even though the props still exist on the type.

Hello world

<Text>Hello world</Text>

View in Playroom

Typography (font size + line height)

Use predefined typography classes instead of one-off font-size/line-height styles. Line height is bundled into each class — there is no separate line-height utility.

Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world

{/* body styles */}
<Text className="text-body-8">Hello world</Text>   {/* 8px / 12px line-height */}
<Text className="text-body-10">Hello world</Text>  {/* 10px / 16px line-height */}
<Text className="text-body-12">Hello world</Text>  {/* 12px / 20px line-height */}
<Text className="text-body-14">Hello world</Text>  {/* 14px / 20px line-height */}
<Text className="text-body-16">Hello world</Text>  {/* 16px / 24px line-height */}
<Text className="text-body-20">Hello world</Text>  {/* 20px / 28px line-height */}

{/* heading styles — use when emphasizing text that isn't semantically a heading */}
<Text className="text-heading-12">Hello world</Text> {/* 12px / 20px line-height */}
<Text className="text-heading-14">Hello world</Text> {/* 14px / 22px line-height */}
<Text className="text-heading-16">Hello world</Text> {/* 16px / 24px line-height */}
<Text className="text-heading-18">Hello world</Text> {/* 18px / 26px line-height */}
<Text className="text-heading-20">Hello world</Text> {/* 20px / 28px line-height */}
<Text className="text-heading-24">Hello world</Text> {/* 24px / 32px line-height */}
<Text className="text-heading-28">Hello world</Text> {/* 28px / 40px line-height */}
<Text className="text-heading-32">Hello world</Text> {/* 32px / 48px line-height */}

View in Playroom

Font weight

Hello worldHello worldHello world

<Text className="font-regular">Hello world</Text>
<Text className="font-strong">Hello world</Text>
<Text className="font-stronger">Hello world</Text>

View in Playroom

Responsive gotcha: a responsive typography class (lg:text-body-14, lg:text-heading-*, etc.) sets font-weight as part of its scale definition, so it overrides an earlier non-responsive font-strong/font-stronger. Repeat the font-weight utility at the same breakpoint: className="text-body-16 font-strong lg:text-body-14 lg:font-strong".

Text align

Prefer logical properties (start/end) over left/right for automatic RTL support.

Hello worldHello worldHello world

<Text className="text-start">Hello world</Text>
<Text className="text-center">Hello world</Text>
<Text className="text-end">Hello world</Text>

View in Playroom

Text transform

sPoNgEbObsPoNgEbObsPoNgEbObsPoNgEbOb

<Text className="uppercase">sPoNgEbOb</Text>
<Text className="lowercase">sPoNgEbOb</Text>
<Text className="capitalize">sPoNgEbOb</Text>
<Text className="normal-case">sPoNgEbOb</Text>

View in Playroom

Tone (color)

See the Color foundation for the full palette.

Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world

<Text className="text-accent">Hello world</Text>
<Text className="text-critical">Hello world</Text>
<Text className="text-disabled">Hello world</Text>
<Text className="text-inverse">Hello world</Text>
<Text className="text-inverse-secondary">Hello world</Text>
<Text className="text-onPrimary">Hello world</Text>
<Text className="text-onPrimary-disabled">Hello world</Text>
<Text className="text-primary">Hello world</Text>
<Text className="text-secondary">Hello world</Text>
<Text className="text-tertiary">Hello world</Text>

{/* hover / active state variants */}
<Text className="text-accent-hover">Hello world</Text>
<Text className="text-secondary-hover">Hello world</Text>
<Text className="text-accent-pressed">Hello world</Text>

View in Playroom

Line clamp

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

<Text className="line-clamp-1">
 The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung
  disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
  </Text>
<Text className="line-clamp-2">
  The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung
  disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
  </Text>
<Text className="line-clamp-3">
  The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung
  disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
  </Text>
<Text className="line-clamp-4">
  The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung
  disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
  </Text>

View in Playroom

Font Weight

Use our custom font-weight utilities to change the weight of text. These utilities are brandable, allowing them to map to different weights across various brands.

Hello worldHello worldHello world

{/* Regular */}
<Text className="font-regular">Hello world</Text>

{/* Strong */}
<Text className="font-strong">Hello world</Text>

{/* Stronger */}
<Text className="font-stronger">Hello world</Text>

View in Playroom

Line Clamp

Clamp the text to a specific number of lines.

{/* 1 */}
<Text className="line-clamp-1">
  The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung
  disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
</Text>

{/* 2 */}
<Text className="line-clamp-2">
  The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung
  disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
</Text>

{/* 3 */}
<Text className="line-clamp-3">
  The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung
  disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
</Text>

{/* 4 */}
<Text className="line-clamp-4">
  The longest word in any of the major English language dictionaries is
  pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung
  disease contracted from the inhalation of very fine silica particles,
  specifically from a volcano; medically, it is the same as silicosis.
</Text>

View in Playroom

Text Align

Set the text alignment of an element using our utility classes. Prefer logical properties (such as start instead of left and end instead of right), for automatic support in right-to-left languages.

Hello worldHello worldHello world

<Stack className="items-stretch w-full">
  {/* Start */}
  <Text className="text-start">Hello world</Text>

  {/* Center */}
  <Text className="text-center">Hello world</Text>

  {/* End */}
  <Text className="text-end">Hello world</Text>
</Stack>

View in Playroom

Text Transform

Transform the text casing.

sPoNgEbObsPoNgEbObsPoNgEbObsPoNgEbOb

{/* uppercase */}
<Text className="uppercase">sPoNgEbOb</Text>

{/* lowercase */}
<Text className="lowercase">sPoNgEbOb</Text>

{/* capitalize */}
<Text className="capitalize">sPoNgEbOb</Text>

{/* none */}
<Text className="normal-case">sPoNgEbOb</Text>

View in Playroom

Tone

Use our Tailwind utility classes to control the color of your text. Refer to the Color section in foundation for more text colors.

Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world

{/* accent */}
<Text className="text-accent">
  Hello world
</Text>

{/* critical */}
<Text className="text-critical">
  Hello world
</Text>

{/* disabled */}
<Text className="text-disabled">
  Hello world
</Text>

{/* inverse */}
<Text className="text-inverse">
  Hello world
</Text>

{/* inverse-secondary */}
<Text className="text-inverse-secondary">
  Hello world
</Text>

{/* onPrimary */}
<Text className="text-onPrimary">
  Hello world
</Text>

{/* onPrimary-disabled */}
<Text className="text-onPrimary-disabled">
  Hello world
</Text>

{/* primary */}
<Text className="text-primary">
  Hello world
</Text>

{/* secondary */}
<Text className="text-secondary">
  Hello world
</Text>

{/* tertiary */}
<Text className="text-tertiary">
  Hello world
</Text>

View in Playroom

We also have some color utilities specifically for hover and active states:

Hello worldHello worldHello world

{/* accent-hover */}
<Text className="text-accent-hover">
  Hello world
</Text>

{/* secondary-hover */}
<Text className="text-secondary-hover">
  Hello world
</Text>

{/* accent-pressed */}
<Text className="text-accent-pressed">
  Hello world
</Text>

View in Playroom

Typography

To maintain visual consistency throughout the app, you should use our predefined typography styles for all text elements.

Text styles

For standard text elements, apply our text styles to ensure readability and consistent aesthetics across the app.

Hello worldHello worldHello worldHello worldHello worldHello world

<Stack>
  {/*
    font-size: 8px;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0px;
    */}
  <Text className="text-body-8">Hello world</Text>

  {/*
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0px;
    */}
  <Text className="text-body-10">Hello world</Text>

  {/*
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    */}
  <Text className="text-body-12">Hello world</Text>

  {/*
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    */}
  <Text className="text-body-14">Hello world</Text>

  {/*
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0px;
    */}
  <Text className="text-body-16">Hello world</Text>

  {/*
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0px;
    */}
  <Text className="text-body-20">Hello world</Text>
</Stack>

View in Playroom

Heading styles

Sometimes you need to emphasize some text, but semantically it's not a heading. In this case, you can use heading styles.

Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world

<Stack>
  {/*
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0px;
    */}
  <Text className="text-heading-12">Hello world</Text>

  {/*
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0px;
    */}
  <Text className="text-heading-14">Hello world</Text>

  {/*
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0px;
    */}
  <Text className="text-heading-16">Hello world</Text>

  {/*
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0px;
    */}
  <Text className="text-heading-18">Hello world</Text>

  {/*
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0px;
    */}
  <Text className="text-heading-20">Hello world</Text>
  
  {/*
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0px;
    */}
  <Text className="text-heading-24">Hello world</Text>

  {/*
    font-size: 28px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0px;
    */}
  <Text className="text-heading-28">Hello world</Text>

  {/*
    font-size: 32px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: 0px;
    */}
  <Text className="text-heading-32">Hello world</Text>
</Stack>

View in Playroom

Responsive Typography

When combining responsive typography utility classes (text-body-*, text-heading-*) with font-weight utilities (font-strong, font-stronger), the font-weight utility must be repeated at each breakpoint where a new typography class is applied.

Why this happens

Responsive typography classes (e.g. lg:text-body-14) set fontWeight as part of the full type scale definition. Because responsive variants are generated at the end of the stylesheet, a lg:text-body-* or lg:text-heading-* class will override a non-responsive font-strong or font-stronger that appears earlier — resetting the font-weight back to the scale default.

Repeating the font-weight utility at each breakpoint

{/*
  ❌ Incorrect — font-weight resets at the lg breakpoint
  because lg:text-body-14 overrides font-strong's fontWeight
*/}
<Text className="text-body-16 font-strong lg:text-body-14">
  Hello world
</Text>

{/*
  ✅ Correct — repeat font-strong at the same breakpoint
  so it takes effect after lg:text-body-14 in the cascade
*/}
<Text className="text-body-16 font-strong lg:text-body-14 lg:font-strong">
  Hello world
</Text>

Note: This applies to all typography utility classes (text-body-*, text-heading-*) used with font-weight utilities (font-strong, font-stronger). If you are not changing the typography scale at a breakpoint, a single font-strong or font-stronger is sufficient.

API Reference

Text

Prop	Default	Description
`as?`	`'span'`	`React.ElementType` HTML element to render
`children`	_	`React.ReactNode` The content of the component
`className?`	_	`string` CSS class name applied to the root element
`style?`	_	`React.CSSProperties` Inline styles applied to the root element
~~`typography?`~~	`-`	⚠️ Deprecated, use Tailwind text utility classes instead, e.g. `text-body-8`, `text-body-10`, `text-body-12`, `text-body-14`, `text-body-16`, `text-body-20`.
~~`tone?`~~	_	⚠️ Deprecated, use Tailwind text color utility classes instead, e.g. `text-accent`, `text-accent-hover`, `text-accent-pressed`, `text-primary`, `text-secondary`, `text-tertiary`, `text-secondary-hover`, `text-disabled`, `text-disabled-secondary`, `text-onPrimary`, `text-onPrimary-disabled`, `text-critical`, `text-critical-onPrimary`, `text-critical-secondary`, `text-inverse`, `text-inverse-secondary`, `text-inverse-caution`, `text-inverse-positive`, `text-inverse-critical`, `text-inverse-accent`, `text-positive`, `text-positive-secondary`, `text-caution`, `text-caution-secondary`, `text-link`, `text-link-hover`, `text-link-pressed`.
~~`fontWeight?`~~	_	⚠️ Deprecated, use Tailwind font-weight utility classes instead, e.g. `font-strong`, `font-stronger`, `font-strongest`.
~~`textAlign?`~~	_	⚠️ Deprecated, use text-align utility classes instead, e.g. `text-center`, `text-end`, `text-start`.
~~`textTransform?`~~	_	⚠️ Deprecated, use text-transform utility classes instead, e.g. `uppercase`, `lowercase`, `capitalize`, `normal-case`.
~~`lineClamp?`~~	_	⚠️ Deprecated, use line-clamp utility classes instead, e.g. `line-clamp-2`.
~~`tabularNumbers?`~~	_	⚠️ Deprecated, use `tabular-nums` utility class instead.

Text

Quick Start

Basic Usage​

Typography (font size + line height)​

Font weight​

Text align​

Text transform​

Tone (color)​

Line clamp​

Font Weight​

Line Clamp​

Text Align​

Text Transform​

Tone​

Typography​

Text styles​

Heading styles​

Responsive Typography​

Why this happens​

Repeating the font-weight utility at each breakpoint​

API Reference​

Text

Basic Usage

Typography (font size + line height)

Font weight

Text align

Text transform

Tone (color)

Line clamp

Font Weight

Line Clamp

Text Align

Text Transform

Tone

Typography

Text styles

Heading styles

Responsive Typography

Why this happens

Repeating the font-weight utility at each breakpoint

API Reference