Text 
Edit
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: boolean,"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>
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 alimit.head: Trims content at the beginning. Requires alimit.middle: Trims content in the middle. Requires alimit.tail: Trims content at the end. Requires alimit.
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.
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 specifiec 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.
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.