Typography

A collection of foundational font design tokens combined into a preset to define reusable typography styles

React

Is new design vision part implemented using new tokens?

Up to date

Introduction

Use this component for consistent rendering of texts, using the text presets available.

When to use

Use Typography component in every case you need to render text, from paragraphs to titles.

When not to use

In case the needed preset is not available, please discuss it with Design team and contribute if needed.


Usage


                                                        
                                                        
                                                            import { Typography } from '@optimus-web/core';
                                                        import { TEXT_PRESET_KEY } from '@optimus-web/local-tokens';
                                                        
                                                        <Typography textStyle="bodySmall" as="p">
                                                          Some example dummy content
                                                        </Typography>
                                                        
                                                            

Storybook

Open example in our Storybook

Storybook failed to load. Please connect to the VPN to access.

API

Name

Description

Type

Default

textStyle

Defines which set of CSS rules will apply to the text

TextStyle

-

as?

Defines which element will be render ultimately in the DOM

React.ElementType

"div"

children

Gives the button a specific data test id

React.ReactNode

-

align?

Aligns the content

'left' | 'right' | 'center'

undefined

noWrap?

Prevents text from wrapping

boolean

undefined

overflowWrap?

Controls the overflow-wrap CSS property used for preventing text from overflowing.

'normal' | 'break-word'

undefined

wordBreak?

Controls the word-break CSS property used for preventing text from overflowing.

'break-all' | 'break-word' | 'normal'

undefined

variant?

Defines the color

TypographyVariant

primary

ellipsis?

Enables the text-overflow CSS property.

boolean

undefined

maxLines?

maxLines for the ellispis property

number

undefined

Existing components

Existing typography components are now using this one underneath, configured with the proper preset in each case, so they are up to date, valid and can be used.

Component

Text style

MajorHighlight

highlightMedium

ModerateHighlight

highlightSmall

MinorHighlight

bodyLargeStrong

Label

bodyMediumStrong

SmallLabel

bodySmallStrong

Body

size === 'small' ? 'bodyMedium' : 'bodyLarge'

PageTitle

titleLargeStrong

SectionTitle

titleMediumStrong

SubsectionTitle

titleSmallStrong