Text

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

Figma LibraryView in StorybookView in Playroom

Quick Start

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

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.

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.
{/* 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

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

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.