Empty state

Explains why a view has no content and what to do next, such as an empty list or a search without results.

import {FolderOpenIcon} from '@earendil-works/elanor-icons-react';
import {Button, EmptyState} from '@earendil-works/elanor-react';

export default function EmptyStateDemo() {
  return (
    <EmptyState.Root>
      <EmptyState.Illustration>
        <FolderOpenIcon size={64} />
      </EmptyState.Illustration>
      <EmptyState.Body>
        <EmptyState.Copy>
          <EmptyState.Title level={2}>No saved views</EmptyState.Title>
          <EmptyState.Description>
            Save a set of filters to find the members you need faster.
          </EmptyState.Description>
        </EmptyState.Copy>
        <EmptyState.Actions>
          <Button>Create view</Button>
        </EmptyState.Actions>
      </EmptyState.Body>
    </EmptyState.Root>
  );
}

import {EmptyState} from '@earendil-works/elanor-react';

<EmptyState.Root>
  <EmptyState.Illustration />
  <EmptyState.Body>
    <EmptyState.Copy>
      <EmptyState.Title level={2} />
      <EmptyState.Description />
    </EmptyState.Copy>
    <EmptyState.Actions />
  </EmptyState.Body>
</EmptyState.Root>;

Set the title’s level to fit the page outline. Illustration and Actions are optional. Copy limits the title and description to 30rem (480px at the default font size), or less in narrower containers.

Renders <div>. Accepts its HTML attributes and ref.

Renders <div>. Accepts its HTML attributes and ref.

Renders <div>. Accepts its HTML attributes and ref.

Renders <div>. Accepts its HTML attributes and ref.

Renders <h1>–<h6>. Also accepts its HTML attributes and ref.

Renders <p>. Accepts its HTML attributes and ref.

Renders <div>. Accepts its HTML attributes and ref.