Empty State

EmptyState tells the user why there is nothing to show and what they can do about it.

import { EmptyState } from '@beyul/sulmu-ui'

Source · Figma

Examples

Inside a card or table

No users match these filters

Remove a filter or try a different keyword.

Clear filters

import { Button, EmptyState, SearchNormalIcon } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <EmptyState
      icon={<SearchNormalIcon size="md" />}
      title="No users match these filters"
      description="Remove a filter or try a different keyword."
      actions={<Button variant="secondary">Clear filters</Button>}
    />
  )
}

Large, with a status code

size="lg" is for a whole page. code shows a large status code above the title.

404

Page not found

The page may have moved, or the link may be wrong.

Back to Dashboard

import { Button, EmptyState } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <EmptyState
      size="lg"
      as="h1"
      code="404"
      title="Page not found"
      description="The page may have moved, or the link may be wrong."
      actions={<Button>Back to Dashboard</Button>}
    />
  )
}

Props

Prop	Type	Default	Description
title*	ReactNode	-	What is missing or what went wrong, in a few words.
description	ReactNode	-	What the user can do about it.
icon	ReactNode	-	Icon in a tinted circle, e.g. <SearchNormalIcon size="md" />.
code	ReactNode	-	Large status code for error pages: "404", "500".
actions	ReactNode	-	Buttons under the text.
size	"sm" | "lg"	sm	sm: inside a card or table (default). lg: a whole page.
as	"h1" | "h2" | "h3"	h3	Heading level of the title. Default: h3 (use h1 for a full error page).

EmptyState also accepts every div attribute.

Usage notes

• The title is an h3 by default. Use as="h1" when the empty state is the whole page.
• For the designed full-page error screens, use Error Page.
• It works as the empty content of a Data Table.