Text

The Text component renders a paragraph (p) HTML element underneath.

Usage

Import the Text component from @avocado-ui/react

Heading

Size

You can specify the size of the Text with the size prop. The supported values are as follows xs, ms, sm, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Trim Text

You can specify the maximum length a text can be with the trim prop. Here's an example below

Lorem Ipsum is simpl...

Lorem Ipsum is simply dummy te...

Lorem Ipsum is simply dummy text of the printing a...

Align Text

You might want to align the Text component. You can use the align prop to change the direction of the text. It could either be left, center, right.

Lorem Ipsum is simpl...

Lorem Ipsum is simply dummy te...

Lorem Ipsum is simply dummy te...

Heading Props

propertydescriptiontypedefault
sizesize to override heading sizexs, ms, sm, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xllevel
trimspecifies a number to truncate textnumbernull
alignspecifies the horizontal orientation of textcenter, left, rightleft