Text – Automattic Design System

A text component for rendering content with predefined typographic variants. Built on design tokens for consistent typography across the UI.

View on Storybook

View source on GitHub

Import

import { Text } from '@wordpress/ui';

Props

Name	Type	Default	Description
`className`	`string`		CSS class name to apply to the element.
`style`	`React.CSSProperties`		CSS style to apply to the element.
`render`	`\| ComponentRenderFn< HTMLAttributesWithRef > \| React.ReactElement< Record< string, unknown > >`		Replaces the component’s default HTML element using a given React element, or a function that returns a React element.
`variant`	`\| 'heading-2xl' \| 'heading-xl' \| 'heading-lg' \| 'heading-md' \| 'heading-sm' \| 'body-xl' \| 'body-lg' \| 'body-md' \| 'body-sm'`	`'body-md'`	The typographic variant to apply, controlling font family, size, line height, and weight. @default “body-md”
`children`	`React.ReactNode`		The content to be rendered inside the component.

Examples

Default

const Default = () => <Text variant="body-md">The quick brown fox jumps over the lazy dog.</Text>;

All Variants

Important: Setting the variant prop to a heading variant will not automatically render a heading element. Use the render prop to render a heading element with the appropriate level.

const AllVariants = () => (
    <Stack
        direction="column"
        gap="lg"
        style={ { color: 'var(--wpds-color-fg-content-neutral)' } }
    >
        { (
            [
                'heading-2xl',
                'heading-xl',
                'heading-lg',
                'heading-md',
                'heading-sm',
                'body-xl',
                'body-lg',
                'body-md',
                'body-sm',
            ] as const
         ).map( ( variant ) => (
            <Stack key={ variant } direction="column" gap="xs">
                <Text variant="heading-sm">{ variant }</Text>
                <Text variant={ variant }>
                    The quick brown fox jumps over the lazy dog.
                </Text>
            </Stack>
        ) ) }
    </Stack>
);

With Render Prop

const WithRenderProp = () => (
    <Stack direction="column" gap="md">
        <Text variant="heading-2xl" render={ <h1 /> }>
            Page Title
        </Text>
        <Text variant="heading-xl" render={ <h2 /> }>
            Section Heading
        </Text>
        <Text variant="body-md" render={ <p /> }>
            A paragraph of body text rendered as a semantic paragraph
            element.
        </Text>
    </Stack>
);