Automattic Design System

Components

Text

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

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

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
variant'body-md'

"heading-2xl" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "body-xl" | "body-lg" | "body-md" | "body-sm"

The typographic variant to apply, controlling font family, size, line height, and weight.

children

ReactNode

The content to be rendered inside the component.

className

string

CSS class name to apply to the element.

style

CSSProperties

CSS style to apply to the element.

render

ComponentRenderFn<HTMLAttributesWithRef<any>> | ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>> | undefined

Replaces the component’s default HTML element using a given React element, or a function that returns a React element.

ExamplesPermalink to this section

DefaultPermalink to this section

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

All VariantsPermalink to this section

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-foreground-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 PropPermalink to this section

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>
);