No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Text

Typography and styling abstraction component used to ensure consistency and standardize text throughout your application.

Best Practices

Do

  • Use Text whenever you need to display stylized text
  • Use Text to display read-only text
  • Use the as prop to give the text a semantic meaning. By deafult, the Text component will result in a span element.

Default

This is an example of the Text component's usage.
Open in CodeSandbox
NameDescriptionDefaultControl
as
"h1""h2""h3""h4""h5""h6""p""pre"
-
wrap
Wraps the text content on white spaces.
boolean
-
truncate
Truncate overflowing text for block displays.
boolean
-
block
Applies a block display for the content.
boolean
-
italic
Applies the italic font style to the content.
boolean
-
underline
Applies the underline text decoration to the content.
boolean
-
strikethrough
Applies the strikethrough text decoration to the content.
boolean
-
size
Applies font size and line height based on the theme tokens.
100200300400500600700800
-
font
Applies the font family to the content.
"base""numeric""monospace"
-
weight
Applies font weight to the content.
"medium""regular""semibold"
-
align
Aligns text based on the parent container.
"start""end""center""justify"
-

Stories

Typography

Different typography components can be used that are based on the Text components. They all share the same props and behaviours that are documented here.

Display text wrapper, semibold, base1000LargeTitle text wrapper, semibold, base900Title1 text wrapper, semibold, base800Title2 text wrapper, semibold, base700Title3 text wrapper, semibold, base600Headline text wrapper, semibold, base500Subheadline text wrapper, semibold, base400Body text wrapper, regular, base300Caption text wrapper, regular, base200
Open in CodeSandbox

Italic

Italic text
Open in CodeSandbox

Underline

Underlined text
Open in CodeSandbox

Strike Through

Strikethrough text
Open in CodeSandbox

Weight

Regular weightMedium weightSemibold weight
Open in CodeSandbox

Size

100 200 300 400 500 600 700 800 900 1000
Open in CodeSandbox

Truncate

This is a really really really really long text
Open in CodeSandbox

Font

This is the default fontThis is numeric fontThis is monospace font
Open in CodeSandbox