Mantine UIFAQColors generator

EmptyState

Display a placeholder for no data, empty results and first-run states

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/core

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:

No results found

We couldn't find anything matching your search. Try adjusting your filters or searching with different keywords to see more results.

Size
Align
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:

No results found

We couldn't find anything matching your search. Try adjusting your filters or searching with different keywords to see more results.

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

When both are used, 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>
  );
}

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:

No results found

We couldn't find anything matching your search. Try adjusting your filters or searching with different keywords to see more results.

Variant
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:

Your cart is empty

Your shopping cart is empty right now. Browse our catalog and add the items you like to get started with your first order.

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

Title heading level

By default, EmptyState.Title renders a div element. Set the order prop to render it as an h1–h6 heading:

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.

No results found

We couldn't find anything matching your search. Try adjusting your filters or searching with different keywords to see more results.

Component Styles API

Hover over selectors to highlight corresponding elements

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

Accessibility

  • The root element does not have a landmark role
  • EmptyState.Title is not a heading by default, set the order prop to change that
  • Make sure that action buttons have accessible labels

Alert

Loader