Text

Text is a core component that renders text in the library, using the library’s typography system.

Usage

Text can be used to render any text-content, like an HTML p or span.

import { __experimentalText as Text } from '@wordpress/components'; function Example() { return <Text>Code is Poetry</Text>; } 

Props

adjustLineHeightForInnerControls

Type: "large","medium","small","xSmall"

Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. TextInput).

import { __experimentalText as Text, TextInput } from '@wordpress/components'; function Example() { return ( <Text adjustLineHeightForInnerControls={"small"}> Lorem ipsum dolor sit amet, consectetur <TextInput value="adipiscing elit..." /> </Text> ); } 

align

Type: CSSProperties['textAlign']

Adjusts the text alignment.

import { __experimentalText as Text } from '@wordpress/components'; function Example() { return ( <Text align="center" isBlock> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </Text> ); } 

color

Type: CSSProperties['color']

Adjusts the text color.

display

Type: CSSProperties['display']

Adjusts the CSS display.

ellipsis

Type: string

The ellipsis string when truncate is set.

ellipsizeMode

Type: "auto","head","tail","middle"

Determines where to truncate. For example, we can truncate text right in the middle. To do this, we need to set ellipsizeMode to middle and a text limit.

• auto: Trims content at the end automatically without a limit.
• head: Trims content at the beginning. Requires a limit.
• middle: Trims content in the middle. Requires a limit.
• tail: Trims content at the end. Requires a limit.

highlightCaseSensitive

Type: boolean

Escape characters in highlightWords which are meaningful in regular expressions.

highlightEscape

Type: boolean

Determines if highlightWords should be case sensitive.

highlightSanitize

Type: boolean

Array of search words. String search terms are automatically cast to RegExps unless highlightEscape is true.

highlightWords

Type: any[]

Letters or words within Text can be highlighted using highlightWords.

import { __experimentalText as Text } from '@wordpress/components'; function Example() { return ( <Text highlightWords={ [ 'pi' ] }> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac mollis mi. Morbi id elementum massa. Suspendisse interdum auctor ligula eget cursus. In fermentum ultricies mauris, pharetra fermentum erat pellentesque id. </Text> ); } 

isBlock

Type: boolean

Sets Text to have display: block.

Note: text truncation only works when isBlock is false.

isDestructive

Type: boolean

Renders a destructive color.

limit

Type: number

Determines the max characters when truncate is set.

lineHeight

Type: CSSProperties['lineHeight']

Adjusts all text line-height based on the typography system.

numberOfLines

Type: number

Clamps the text content to the specific numberOfLines, adding the ellipsis at the end.

optimizeReadabilityFor

Type: CSSProperties['color']

The Text color can be adapted to a background color for optimal readability. optimizeReadabilityFor can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc…).

import { __experimentalText as Text, View } from '@wordpress/components'; function Example() { const backgroundColor = 'blue'; return ( <View css={ { backgroundColor } }> <Text optimizeReadabilityFor={ backgroundColor }> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </Text> </View> ); } 

size

Type: CSSProperties['fontSize'],TextSize

Adjusts text size based on the typography system. Text can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The size value can be a system preset, a number, or a custom unit value (string) such as 30em.

import { __experimentalText as Text } from '@wordpress/components'; function Example() { return <Text size="largeTitle">Code is Poetry</Text>; } 

truncate

Type: boolean

Enables text truncation. When truncate is set, we are able to truncate the long text in a variety of ways.

Note: text truncation won’t work if the isBlock property is set to true

import { __experimentalText as Text } from '@wordpress/components'; function Example() { return ( <Text truncate> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac mollis mi. Morbi id elementum massa. Suspendisse interdum auctor ligula eget cursus. In fermentum ultricies mauris, pharetra fermentum erat pellentesque id. </Text> ); } 

upperCase

Type: boolean

Uppercases the text content.

variant

Type: "muted"

Adjusts style variation of the text.

import { __experimentalText as Text } from '@wordpress/components'; function Example() { return <Text variant="muted">Code is Poetry</Text>; } 

weight

Type: CSSProperties['fontWeight'],TextWeight

Adjusts font-weight of the text.