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, Body, or Legal abstractions instead of using this component directly.
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.
The default font family is Gotham. Use the
chronicle prop to use Chronicle. Gotham and Chronicle can both be used at all five sizes.
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
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.
Error styles are most often used to indicate an error in a user input.
By default <Type> is block-level (renders a <p> tag). If the inline prop is used, <Type> is inline (renders a <span> tag).
number | string
Font size: 1=smallest, 5=biggest. Size is inherited if not specified.
Use Gotham font. Font is inherited if not specified.
Use Chronicle font. Font is inherited if not specified.
Flag to indicate if the color of the text will be color-red. Takes precedence over the `light` prop if used together.
Turn text uppercase and spaces out letters.
Sets text to "neutral-darker" defined in base-styles.
Sets text to a color defined by base-styles (overrides `error` and `light` props).
Use a custom component instead of the default <p> component.