Feedback

Empty

Placeholder for views with nothing to show — built-in inbox illustration, title, description and an actions area rendered from children.

Import

import { Empty } from "@zephora/react";

No projects yet

Create your first project to get started.

<Empty
  title="No projects yet"
  description="Create your first project to get started."
/>

Children render inside a dedicated actions area under the description.

No results

Try a different search term.

<Empty title="No results" description="Try a different search term.">
  <Button variant="soft">Clear filters</Button>
</Empty>

Inbox zero

No data

Large scale placeholder.

<Empty size="sm" title="Inbox zero" icon={<span style={{ fontSize: 32 }}>🎉</span>} />

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Illustration shown above the title. Defaults to a built-in inbox drawing.
`title`	`ReactNode`	`"No data"`	Headline.
`description`	`ReactNode`	—	Supporting copy under the title.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Overall scale.
`children`	`ReactNode`	—	Rendered as an actions area under the description.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.