EmptyState – Automattic Design System

The root container for an empty state component.

Import

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

Props

Name	Type	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.
`children`	`ReactNode`	The content to be rendered inside the component.

Examples

Default

const Default = () => <EmptyState.Root>(<>
        <EmptyState.Icon icon={ search } />
        <EmptyState.Title>No results found</EmptyState.Title>
        <EmptyState.Description>
            Try adjusting your search or filter to find what you&apos;re
            looking for.
        </EmptyState.Description>
        <EmptyState.Actions>
            <Button variant="outline">Clear filters</Button>
            <Button>Add item</Button>
        </EmptyState.Actions>
    </>)</EmptyState.Root>;

With Custom Visual

const WithCustomVisual = () => <EmptyState.Root>(<>
        <EmptyState.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>All caught up!</EmptyState.Title>
        <EmptyState.Description>
            You&apos;ve completed all your tasks. Great work!
        </EmptyState.Description>
        <EmptyState.Actions>
            <Button>Create new task</Button>
        </EmptyState.Actions>
    </>)</EmptyState.Root>;