Text

Text presents text to the user.

This is a Text component.

Code Example

<Text> Renders as a span, by default. </Text>

Components

Text is a standalone component.

Text

Text can be customized with following props.

Note that Text has many props and classes. Consider copying the source code to your project to remove unused classes and reduce bundle size.

Prop	Type	Description
`is`	string	Allows changing the element tag.
`block`	boolean	sets display to `block` (normally inline)
`inline`	boolean	sets display to `inline`
`inline-block`	boolean	sets display to `inline-block`
`color`	string	Sets the color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
neutral-content	boolean	Sets the color to neutral-content.
primary-content	boolean	Sets the color to primary-content.
secondary-content	boolean	Sets the color to secondary-content.
accent-content	boolean	Sets the color to accent-content.
info-content	boolean	Sets the color to info-content.
success-content	boolean	Sets the color to success-content.
warning-content	boolean	Sets the color to warning-content.
error-content	boolean	Sets the color to error-content.
`size`	string	Sets the size. Can be set to one of the below size prop names.
`9xl`	boolean	Sets the size to `9xl`
`8xl`	boolean	Sets the size to `8xl`
`7xl`	boolean	Sets the size to `7xl`
`6xl`	boolean	Sets the size to `6xl`
`5xl`	boolean	Sets the size to `5xl`
`4xl`	boolean	Sets the size to `4xl`
`3xl`	boolean	Sets the size to `3xl`
`xl`	boolean	Sets the size to `xl`
`lg`	boolean	Sets the size to `lg`
`md`	boolean	Sets the size to `md` (the default)
`sm`	boolean	Sets the size to `sm`
`xs`	boolean	Sets the size to `xs`
`align`	string	Sets the size. Can be set to one of the below align prop names.
`left`	boolean	Sets align to `left`
`center`	boolean	Sets align to `center`
`right`	boolean	Sets align to `right`
`justify`	boolean	Sets align to `justify`
`case`	string	Sets the case. Can be set to `upper`, `lower`, `capitalize`, or `normal`.
`uppercase`	boolean	Sets case to `uppercase`
`lowercase`	boolean	Sets case to `lowercase`
`capitalize`	boolean	Sets case to `capitalize`
`normal-case`	boolean	Sets case to `normal-case`
`font`	string	Sets the font style. Can be set to one of the below font prop names.
`sans`	boolean	Sets font to `sans`
`serif`	boolean	Sets font to `serif`
`mono`	boolean	Sets font to `mono`
`weight`	string	Sets the font weight. Can be set to any of the below prop names.
`thin`	boolean	Sets weight to `thin`
`extralight`	boolean	Sets weight to `extralight`
`light`	boolean	Sets weight to `light`
`normal`	boolean	Sets weight to `normal`
`medium`	boolean	Sets weight to `medium`
`semibold`	boolean	Sets weight to `semibold`
`bold`	boolean	Sets weight to `bold`
`extrabold`	boolean	Sets weight to `extrabold`
`black`	boolean	Sets weight to `black`

Color

There are two ways of specifying Text color:

The primary, secondary, neutral, accent, info, success, warning, and error boolean props.
The color prop, which accepts a string with any of the above prop names.

neutral primary secondary accent info success warning error

Code Example

<Text primary>primary</Text>

Tag Name

Use the is prop to change the tag name.

renders as label

Code Example

<Text is="label">renders as label</Text>

Size

There are two ways of specifying Text size:

The xs, sm, md, lg, and xl boolean props.
The size prop, which accepts the above prop names, plus 2xl through 9xl

xs sm md lg xl 2xl 3xl 4xl 5xl 6xl 7xl 8xl 9xl

Code Example

<Text xl>extra large text</Text>

Align

There are two ways of specifying Text align:

The left, center, right, and justify boolean props.
The align prop, which accepts the above prop names.

left

center

right

justify: Radio telescope hundreds of thousands rich in mystery are creatures of the cosmos tingling of the spine Vangelis? The ash of stellar alchemy circumnavigated star stuff harvesting star light Sea of Tranquility something incredible is waiting to be known two ghostly white figures in coveralls and helmets are softly dancing. Rich in heavy atoms courage of our questions astonishment permanence of the stars permanence of the stars a still more glorious dawn awaits and billions upon billions upon billions upon billions upon billions upon billions upon billions.

Code Example

<Text right>right-aligned text</Text>

Case

There are two ways of specifying Text case:

The uppercase, lowercase, capitalize, and normal-case boolean props.
The case prop, which accepts lower, upper, capitalize, and normal

uppercase this text lowercase this text capitalize this text normal-case this text

Code Example

<Text uppercase>uppercase</Text>

Font

There are two ways of specifying Text font:

The sans, serif, and mono boolean props.
The font prop, which accepts the above values.

sans serif mono

Code Example

<Text mono>mono</Text>

Weight

There are two ways of specifying Text weight:

The thin, extralight, light, normal, medium, semibold, bold, extrabold and black boolean props.
The weight prop, which accepts the above values.

thin extralight light normal medium semibold bold extrabold black

Code Example

<Text light>light</Text>

Prev Table

Next Tooltip