Skip to content

Type

Status: Stable

This component provides a low-level primitive for rendering text with support for a variety of different styles. In most cases, you should use the Title or Text abstractions instead of using this component directly.

Variants

Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Size

As a general guideline, size 2 is considered "normal" or "body" text, size 1 is for "fine print", and size 3 can be used for lead text.

Size 1 (smallest)

Size 2 ("normal")

Size 3

Size 4

Size 5 (biggest)

Font family

The default font family is Gotham. Use the chronicle prop to use Chronicle. Gotham and Chronicle can both be used at all five sizes.

Gotham

Chronicle

Text formatting

Note that the inline prop can be used to render text inline with other text (by default <Type> renders its children in a block-level <p>).

Bold text

Italic text

Uppercase text

Bold and italic text in the same sentence.

Color

light sets a neutral shade (neutral-darker) that has high enough contrast for accessibility. Other Currency colors can be used, but you should use the Currency contrast checker to ensure that the color combination you choose is accessible.

Light text

Green text

Blue text

Error

Error styles are most often used to indicate an error in a user input.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Props

<Type>

bold

boolean
Bold styling.

chronicle

boolean
Use Chronicle font. Font is inherited if not specified.

color

string
Sets text to a color defined by base-styles (overrides `error` and `light` props).

error

boolean
Flag to indicate if the color of the text will be color-red. Takes precedence over the `light` prop if used together.

gotham

boolean
Use Gotham font. Font is inherited if not specified.

inline

boolean
By default `<Type>` is block-level (renders a <p> tag). If the inline prop is used, `<Type>` is inline (renders a <span> tag).

italic

boolean
Italic styling.

light

boolean
Sets text to "neutral-darker" defined in base-styles.

size

string | number
Font size: 1=smallest, 5=biggest. Size is inherited if not specified.

uppercase

boolean
Turn text uppercase and spaces out letters.

children

ReactNode

className

string

id

string

style

CSSProperties

component

ReactElement

ref

(instance: any) => void | RefObject<any>