---
name: Text
package: '@wordpress/ui'
category: Typography
status: stable
canonical: 'https://system.automattic.design/components/text/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-text--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/ui/src/text'
---

# Text

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

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

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `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. |


## Examples

### Default

```tsx
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.

```tsx
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 Prop

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