Empty State

import { EmptyStateDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.EmptyState);

Usage

EmptyState displays a placeholder for "no data" situations: empty search results, empty tables and lists, first-run states or error illustrations with an optional call to action. The simplest way to use it is with icon, title and description props:

Compound components

For full control over the content, use compound components instead of (or together with) the shorthand props. Available components:

• EmptyState.Indicator – icon or illustration
• EmptyState.Title – title text
• EmptyState.Description – description text
• EmptyState.Actions – wrapper for action buttons

Shorthand props and compound components can be mixed. When both are provided, the content from icon, title and description props is rendered first, followed by children:

import { Button, EmptyState } from '@mantine/core';

function Demo() {
  return (
    <EmptyState icon={<Icon />} title="No results found">
      <EmptyState.Actions>
        <Button variant="default">Reset filters</Button>
      </EmptyState.Actions>
    </EmptyState>
  );
}

Alignment

Set the align prop to control how the content is arranged:

• center (default) – indicator, title, description and actions are stacked in a centered column
• left – indicator is placed on the left, the content is aligned next to it on the right
• right – indicator is placed on the right, the content is aligned next to it on the left

Change the align prop in the configurator above to see how it works. With left and right alignment the indicator is aligned to the top of the content.

Variant

Set the variant prop to filled or light to display the icon inside a colored circular indicator. Use the color prop to change the indicator color. If variant is not set, the icon is displayed with a dimmed color:

Indicator background

Set withIndicatorBackground prop to display a neutral circular background behind the indicator without setting a variant:

Size

EmptyState supports xs, sm, md, lg and xl sizes. The size prop controls the indicator size, gap between elements and font sizes of the title and description. Change the size prop in the configurator above to see how it scales.

Title heading level

By default, EmptyState.Title renders a div element without a semantic heading level. If the empty state title should be a heading, set the order prop to render it as an h1–h6 element:

import { EmptyState } from '@mantine/core';

function Demo() {
  return (
    <EmptyState>
      <EmptyState.Title order={2}>No results found</EmptyState.Title>
    </EmptyState>
  );
}

Accessibility

• The root element is a plain div, it is not assigned a landmark role.
• EmptyState.Title renders a non-heading div by default. Set the order prop if the title should be exposed as a heading to assistive technologies.
• Action buttons are rendered as provided – make sure they have accessible labels.