Empty State

An Empty State fills a list, table or panel that has nothing in it yet, with a title, an explanation and the action that would change that. A blank area reads as a broken screen; an empty state reads as a screen waiting for its first item.

Demo

Rendered live, with the same build of the library you install.

No projects yet

Create your first project and it will show up here.

Usage

Source
EmptyState.tsx
import { NButton, NEmptyState } from '@nayan-ui/react';
import { Inbox } from 'lucide-react';


const EmptyState = () => {
  return (
    <div>
      <NEmptyState
        icon={<Inbox className="h-8 w-8" />}
        title="No projects yet"
        message="Create your first project and it will show up here."
        actions={<NButton>New project</NButton>}
      />
    </div>
  );
};


export default EmptyState;

Attributes

10 props
NameTypeDefaultDetails
titleReactNodeRequiredThe title prop.
messageReactNodeOptionalThe message prop.
iconReactNodeOptionalShown above the title — an icon or a small illustration.
actionsReactNodeOptionalButtons or links under the message.
classNamestring''The className prop.
iconClassNamestring''The iconClassName prop.
titleClassNamestring''The titleClassName prop.
messageClassNamestring''The messageClassName prop.
actionsClassNamestring''The actionsClassName prop.
childrenReactNodeOptionalThe children prop.

Tags

Other components solving nearby problems.