Empty

Empty communicates that a collection, search, page or data region has no content to display. It centers an illustration, optional subtitle, title, description, custom content and actions in one consistent surface. It supports regular and compact modes, bordered and borderless surfaces, localization, provider defaults, and full-width layouts.

Basic usageCopy Anchor Link

The component uses a monochrome empty-state illustration by default. The default container has a dashed border and uses the default size.

<Empty
  title="No documents yet"
  description="Create your first document to get started."
  actions={<Button>Create document</Button>}
/>

Use fullWidth when the empty state should occupy the whole available region.

Content and actionsCopy Anchor Link

subtitle adds a small contextual label above the title. content accepts any React content, such as a hint, filter summary, form fragment or custom message. actions is intended for buttons or links and is centered below the content. children is an alias for content; when both are supplied, content wins.

<Empty
  subtitle="Search results"
  title="Nothing found"
  description="Try changing your filters or search terms."
  content={<span>Search supports names, tags and descriptions.</span>}
  actions={
    <>
      <Button variant="primary">Clear filters</Button>
      <Button variant="outline">Try again</Button>
    </>
  }
/>

IllustrationCopy Anchor Link

The default illustration is the project’s monochrome empty-state asset. Pass imageSrc to use another image, or pass imageContent to replace the image with any React content: an image component, SVG, icon, illustration, or custom markup. The older image prop remains supported as an alias. imageContent takes precedence over image, and both take precedence over the default image. imageAlt supplies alternative text when the default or imageSrc image is used.

<Empty imageSrc="/illustrations/no-results.png" imageAlt="No search results" />
<Empty imageContent={<SearchX aria-hidden="true" size={72} />} title="No results" />
<Empty imageContent={<MyCustomIllustration />} title="Custom empty state" />

Illustration resolution follows this order: imageContent, then the legacy image prop, then imageSrc, then the default project illustration. This makes it possible to provide arbitrary content without changing the rest of the empty state.

Sizes and borderCopy Anchor Link

size="default" is intended for page-level empty states and uses a 176×176px illustration area. size="sm" uses a 112×112px illustration area together with smaller typography and spacing for compact panels, tables and cards. The dashed border is enabled by default; set bordered={false} for a borderless presentation.

<Empty size="default" />
<Empty size="sm" bordered={false} />

Localization and ConfigProviderCopy Anchor Link

Built-in fallback title and description are available in en, uk, de and fr. Set the global language with ConfigProvider; an Empty-level locale overrides it. Explicit title and description always take precedence over translated defaults.

<ConfigProvider locale="uk">
  <Empty actions={<Button>Створити документ</Button>} />
</ConfigProvider>

<Empty locale="fr" />

ConfigProvider can also define defaults for all nested Empty components:

<ConfigProvider components={{ empty: { size: 'sm', bordered: false } }}>
  <Empty title="Compact empty state" />
</ConfigProvider>

Component props override ConfigProvider.components.empty values.

API ReferenceCopy Anchor Link

ConfigProvider defaultsCopy Anchor Link

The empty component configuration supports the following defaults:

Individual props have priority over provider defaults.