Text Edit

A component for rendering text.

Usage #Usage

import { __experimentalText as Text } from '@wordpress/components';

const HeroPanel = () => (
    <>
        <Text variant="title.large" as="h1">
            Hello World!
        </Text>
        <Text variant="body">Greetings to you!</Text>
    </>
);

Top ↑

Props #Props

The component accepts the following props:

as #as

Determines the HTML selector for the text.

For most use-cases you can use this component instead of a h1, h2, h3, h4, h5, h6 or p.

• Type: String
• Required: No
• Default: ”

Top ↑

variant #variant

Determines the style for the text. Available variants:

• title
• title.large
• title.medium
• title.small
• subtitle
• subtitle.large
• subtitle.small
• body
• body.large
• body.small
• button
• caption

• label

• Type: String

• Required: No
• Default: ‘body’