Used as a placeholder for when the data to display some content is not available. Empty State occupies an entire area of a widget or a page.

action

description

illustration

secondaryAction

title

variant

() => {
  return (
    <Box width="100%">
      <EmptyState
        illustration={<img src="/placeholders/illustration.svg" loading="lazy" alt="Add Steps" />}
        title="Add Steps"
        description="Each process should contain at least one step to be able to automate."
        action={
          <Button variant="primary" round>
            Add Steps
          </Button>
        }
        secondaryAction={
          <Link
            icon={IconInformation}
            iconAfter={IconArrowUpRight}
            href="https://www.sema4.ai"
            target="_blank"
            rel="noopener"
            variant="secondary"
            fontWeight="medium"
          >
            Learn More
          </Link>
        }
      />
    </Box>
  );
}

EmptyState

() => {
  return (
    <Box width="100%">
      <EmptyState
        title="No results found"
        description="There aren't any results for that query."
        variant="secondary"
        action={
          <Button variant="secondary" round>
            Reset filters
          </Button>
        }
      />
    </Box>
  );
}

Empty state component is available in two variants. Primary variant is used for empty pages or pages where the primary part is empty.
Secondary state is used for page elements such as tables, charts, cards.


Name	Description	Default
action required	Primary action to avoid the empty state	-
description required	Explanatory description	-
illustration	Empty state illustration	-
secondaryAction	Optional secondary action	-
title required	Main title	-
variant	Layout size	-

Empty State component

Variants