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:

import { Button, EmptyState } from '@mantine/core';
import { MagnifyingGlassIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <EmptyState
      icon={<MagnifyingGlassIcon />}
      title="No results found"
      description="We couldn't find anything matching your search. Try adjusting your filters or searching with different keywords to see more results."
    >
      <EmptyState.Actions>
        <Button variant="default">Reset filters</Button>
      </EmptyState.Actions>
    </EmptyState>
  );
}

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

import { Button, EmptyState } from '@mantine/core';
import { MagnifyingGlassIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <EmptyState>
      <EmptyState.Indicator>
        <MagnifyingGlassIcon />
      </EmptyState.Indicator>
      <EmptyState.Title>No results found</EmptyState.Title>
      <EmptyState.Description>
        We couldn't find anything matching your search. Try adjusting your filters or searching with
        different keywords to see more results.
      </EmptyState.Description>
      <EmptyState.Actions>
        <Button variant="default">Reset filters</Button>
        <Button variant="default">Create new</Button>
      </EmptyState.Actions>
    </EmptyState>
  );
}

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">
      {/* Rendered after the title */}
      <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:

import { EmptyState } from '@mantine/core';
import { MagnifyingGlassIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <EmptyState
      icon={<MagnifyingGlassIcon />}
      title="No results found"
      description="We couldn't find anything matching your search. Try adjusting your filters or searching with different keywords to see more results." color="blue"
    />
  );
}

Indicator background

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

import { Button, EmptyState } from '@mantine/core';
import { ShoppingCartSimpleIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <EmptyState withIndicatorBackground icon={<ShoppingCartSimpleIcon />} title="Your cart is empty">
      <EmptyState.Description>
        Your shopping cart is empty right now. Browse our catalog and add the items you like to get
        started with your first order.
      </EmptyState.Description>
      <EmptyState.Actions>
        <Button variant="default">Browse products</Button>
      </EmptyState.Actions>
    </EmptyState>
  );
}

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>
  );
}

Styles API

EmptyState supports the Styles API; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.

/*
 * Hover over selectors to apply outline styles
 *
 */

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.