Tonic UI
Getting StartedColor ModeColor StyleVersionsContributing
THEME
BordersBreakpointsColorsOutlinesPositionsSpacingSizesShadowsTypography
BUILDING BLOCKS
BoxControlBox
UTILITIES

Text

Text is used for rendering text and paragraphs.

Import

Usage

Sizes

Use the size prop to change the corresponding font size and line height. You can set the value to 4xl, 3xl, 2xl, xl, lg, md, sm, or xs.

EDITABLE EXAMPLE

Heading text

You can format the Text component by passing size prop and fontWeight to display a formatted Heading.

EDITABLE EXAMPLE

Formatting text

You can format the Text component by passing fontSize, lineHeight, or other style props.

EDITABLE EXAMPLE

Text truncation

EDITABLE EXAMPLE

The as prop

EDITABLE EXAMPLE

Props

NameTypeDefaultDescription
sizestringOne of: '4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs'