Empty

Display a placeholder state when no data is available

npm create webcore@latest add Empty

Use the Empty component to display a placeholder when no content or data is available. Use for empty lists, dashboards, carts, or search results. They can guide user action with CTAs to help users add data, retry, or explore alternatives, and reduce confusion by clearly explaining why content is missing and what your users can do about it.

---
// Your import path may differ
import fileIcon from '@icons/file.svg?raw'
---

<Empty
    icon={fileIcon}
    title="No documents found"
    text="You haven't created any documents yet."
    buttons={[{ text: 'Create New'  }]}
/>

The Empty component expects the following two props:

• title: Sets a title for the block, below the icon.
• text: Sets a text under the title. Supports HTML markup.

Optionally, you can set the icon and buttons props. The buttons prop expects an array of ButtonProps objects. The iconWithBackground prop can also be set to true to add a solid background to icons:

<Empty
    icon={fileIcon}
    iconWithBackground={true}
    title="No documents found"
    text="You haven't created any documents yet."
    buttons={[{ text: 'Create New'  }]}
/>

To change the color of the background, you can edit your empty.module.scss file.

Buttons

To define multiple buttons, pass an array of objects to the buttons prop, where each object takes the form of ButtonProps with an additional text property that sets the label for the button:

<Empty
    icon={rocketIcon}
    title="Empty project"
    text="This project is currently empty."
    buttons={[
        { icon: folderIcon, text: 'New folder', href: '/create#folder' },
        { icon: fileIcon, text: 'New file', theme: 'secondary', href: '/create#file' }
    ]}
/>

API

type EmptyProps = {
    icon?: string
    iconWithBackground?: boolean
    title: string
    text: string
    buttons?: ({
        text: string
        icon?: string
    } & ButtonProps)[]
    className?: string
}