Text

The Text component is a wrapper component that will apply typography styles to the text inside.

  • Use different headlines and copies to structure your content hierarchically
  • Avoid using sizes outside the given range
  • Text default size is medium

Usage

By default, Text uses the primary color, which is the color for most interface text, whether body or headlines.

Use the secondary color for supplemental information with diminished contrast (often, the “gray text”). Like form microcopy, captions, helper text, and other medium emphasized text elements.

Use the disabled color for text in blocks, form elements, or other components that are not available to a user at the moment (due to either permissions, dependencies, or pre-requisites) and need to feature “incidental” states.

Properties

NameTypeDefault
fontWeight

"normal" | "semibold" | "bold"

The font-weight property specifies the weight (or boldness) of the font
"normal"
disabled

boolean

Adjust color to display a disabled text element. Takes precedence over `inverted` and `secondary` props
false
inverted

boolean

Adjust color for display on a dark background
false
secondary

boolean

Adjust color to indicate secondary information
false
weak (deprecated)

boolean

Same as `secondary`
false

The Text supports margin, fontSize, fontWeight, fontFamily and textAlign styled-system props.

Playground

default text

custom paragraph

using fontSize alias you can set (small, medium or large)

You can apply responsive styles

Design

Appearance

paragraph large

paragraph medium

paragraph small

paragraph inverted large

paragraph inverted medium

paragraph inverted small

paragraph secondary large

paragraph secondary medium

paragraph secondary small

paragraph secondary inverted large

paragraph secondary inverted medium

paragraph secondary inverted small

paragraph disabled large

paragraph disabled medium

paragraph disabled small

paragraph disabled inverted large

paragraph disabled inverted medium

paragraph disabled inverted small