Automattic Design System

Category: Typography

  • Icon

    Icon

    Renders an SVG icon with a 24px default size.

    If no fill colors are explicitly set on the icon itself, it will be rendered with a currentColor fill.

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

    View on Storybook

    View source on GitHub

    Props

    NameDefaultDescription
    icon Required

    React.ReactElement< React.ComponentProps< 'svg' > >

    The icon to render, which must be an svg element or an SVG from @wordpress/primitives.

    In most cases, you should use an icon from the @wordpress/icons package.

    size24

    number

    The size (width and height) of the icon.

    Examples

    Default

    const Default = () => <Icon icon={wordpress} />;

    With Intrinsic Fill Color

    Explicit fill colors in the icon will be preserved.

    const WithIntrinsicFillColor = () => <Icon
    icon={(<svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="blue"
    >
        <rect x="0" y="0" width="24" height="24" />
    </svg>)} />;
  • Text

    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

    Props

    NameDefaultDescription
    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'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

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

    TextHighlight

    Highlights occurrences of a given string within another string of text. Wraps each match with a <mark> tag which provides browser default styling.

    import { TextHighlight } from '@wordpress/components';

    View on Storybook

    View source on GitHub

    Props

    NameDefaultDescription
    highlight Required

    string

    The string to search for and highlight within the text. Case insensitive. Multiple matches.

    text Required

    string

    The string of text to be tested for occurrences of then given highlight.

    Examples

    Default

    const Default = () => {
    return (
        <TextHighlight
            text="We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts."
            highlight="Gutenberg" />
    );
};
  • Truncate

    Truncate

    import { __experimentalTruncate as Truncate } from '@wordpress/components';

    View on Storybook

    View source on GitHub

    Examples

    Default

    const Default = () => {
    return <Truncate numberOfLines={2}>{defaultText}</Truncate>;
};

    Truncate by character count

    const CharacterCount = () => {
    return <Truncate limit={23} ellipsizeMode="tail" ellipsis="[---]">{defaultText}</Truncate>;
};