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

API Reference​

Text

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.