@cleartrip/ct-design-typography

Typography

Typography component provides consistent text styling across the design system with predefined variants and color schemes.

---

Installation

npm install @cleartrip/ct-design-typography
# or
pnpm add @cleartrip/ct-design-typography

Peer dependencies

# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native

---

Usage

Basic

import { Typography, TypographyVariant, TypographyColor } from '@cleartrip/ct-design-typography';

function Example() {
  return (
    <Typography variant={TypographyVariant.B1} color={TypographyColor.PRIMARY}>
      This is sample typography text
    </Typography>
  );
}

Headings

<Typography variant={TypographyVariant.HD1} color={TypographyColor.HEADING}>
  Large Display Heading
</Typography>

<Typography variant={TypographyVariant.HM1} color={TypographyColor.HEADING}>
  Medium Heading
</Typography>

Body text

<Typography variant={TypographyVariant.B1} color={TypographyColor.PRIMARY}>
  Large body text for important content
</Typography>

<Typography variant={TypographyVariant.B2} color={TypographyColor.SECONDARY}>
  Regular body text with secondary color
</Typography>

Custom styling

<Typography
  variant={TypographyVariant.B1}
  color={TypographyColor.PRIMARY}
  styleConfig={{
    text: [{ fontWeight: 'bold', textDecoration: 'underline' }],
  }}
>
  Custom styled text
</Typography>

---

Props

Prop	Type	Default	Required	Description
children	ReactNode	—	Yes	The content to be displayed within the typography element.
variant	TypographyVariantType	—	Yes	The variant of the typography, such as 'h1', 'body1', etc.
color	TypographyColorType	—	No	The color of the typography.
isUnderlined	boolean	—	No	If true, adds an underline effect to the typography.
isStriked	boolean	—	No	If true, adds a strikethrough effect to the typography.
isClickable	boolean	—	No	If true, makes the typography clickable.
onClick	() => void	—	No	Callback function triggered on typography click.
colorCode	string	—	No	Color code to override the default color.
showInItalics	boolean	—	No	If true, renders the typography in italics.
width	string	—	No	The width of the typography element.
lineClamp	number	—	No	The number of lines to clamp the text. Ellipsis (...) is added for overflow.
isDisabled	boolean	—	No	If true, disables the typography for user interaction.
componentNode	TypographyNodeElementType	—	No	The type of HTML element to be used for rendering the typography.
styleConfig	TypographyStyleConfigProps	—	No	Style configuration for the typography.

---

Variants

Display (HD)

• HD1 — Extra large display text
• HD2 — Large display text
• HD3 — Medium display text

Headings (HM)

• HM1 — Large heading
• HM2 — Medium heading
• HM3 — Small heading
• HM4 — Extra small heading

Body (B)

• B1 — Large body text
• B2 — Regular body text
• B3 — Small body text
• B3CAPS — Small caps text
• B4 — Extra small body text
• B4CAPS — Extra small caps text

Paragraphs (P)

• P1 — Large paragraph
• P2 — Medium paragraph
• P3 — Small paragraph

Labels (L)

• L1 — Large label
• L2 — Medium label
• L3 — Small label

Special

• OVERLINE — Overline text
• TAG — Tag text
• M4BOLD — Bold variant

---

Colors

• PRIMARY — Primary text color
• SECONDARY — Secondary text color
• TERTIARY — Tertiary text color
• HEADING — Heading color
• SUBHEADING — Subheading color
• SUCCESS — Success state color
• ALERT — Alert/error state color
• WARNING — Warning state color
• DISABLED — Disabled state color
• LINK — Link color
• NEUTRAL — Neutral color
• BRAND — Brand color

---

Migration

If migrating from previous versions:

- import { Typography } from 'yagami/core/components';
+ import { Typography, TypographyVariant, TypographyColor } from '@cleartrip/ct-design-typography';