Automattic Design System

Components

EmptyState

The root container for an empty state component.

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

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
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 = () => <EmptyState.Root>{[
        <EmptyState.Icon icon={ search } key="icon" />,
        <EmptyState.Title key="title">No results found</EmptyState.Title>,
        <EmptyState.Description key="description">
            Try adjusting your search or filter to find what you&apos;re
            looking for.
        </EmptyState.Description>,
        <EmptyState.Actions key="actions">
            <Button variant="outline">Clear filters</Button>
            <Button>Add item</Button>
        </EmptyState.Actions>,
    ]}</EmptyState.Root>;

With Custom VisualPermalink to this section

const WithCustomVisual = () => <EmptyState.Root>{[
        <EmptyState.Visual key="visual">
            <svg
                width="50"
                height="50"
                viewBox="0 0 50 50"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <circle cx="25" cy="25" r="25" fill="currentColor" />
            </svg>
        </EmptyState.Visual>,
        <EmptyState.Title key="title">All caught up!</EmptyState.Title>,
        <EmptyState.Description key="description">
            You&apos;ve completed all your tasks. Great work!
        </EmptyState.Description>,
        <EmptyState.Actions key="actions">
            <Button>Create new task</Button>
        </EmptyState.Actions>,
    ]}</EmptyState.Root>;