Empty State

Placeholder for empty lists and searches: icon or art, title, explanation and actions.

Import

import { EmptyState } from '@marbleui/ui'

Props

<EmptyState>

Prop	Type	Default	Description
title *required	`ReactNode`	`—`
actions	`ReactNode`	`—`
art	`ReactNode`	`—`	Larger illustration, shown at its own size instead of the icon tile.
className	`string`	`—`
description	`ReactNode`	`—`
icon	`ReactNode`	`—`	Small glyph, shown in a 48px tile at 24px.
variant	`'card' \| 'plain' \| 'dashed'`	`'plain'`

Usage notes

Placeholder for empty lists, first-run screens and no-result searches: explain what’s missing and offer the next step. For loading use Skeleton; for errors that need attention use Alert.

<EmptyState
  icon={<InboxIcon />}
  title="No projects yet"
  description="Projects group your issues, docs and members."
  actions={<Button>New project</Button>}
/>

Only title is required. icon, description and actions are optional; actions is usually one or two Buttons.
variant is plain (default), dashed or card.
The title renders as an h3; keep the heading order sensible on the page.
It is not a live region: if it replaces content after a search, announce the result count separately.

Example source · show

import { Button } from '../button'
import { EmptyState } from './empty-state'

const I = ({ d }: { d: string }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
    <path d={d} />
  </svg>
)

export const styles = {
  Plain: () => (
    <EmptyState
      icon={<I d="M22 12h-6l-2 3h-4l-2-3H2M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" />}
      title="Inbox zero"
      description="You're all caught up. New mentions and assignments show up here."
    />
  ),
  Dashed: () => (
    <EmptyState
      variant="dashed"
      className="w-[28rem]"
      icon={<I d="M12 5v14M5 12h14" />}
      title="No projects yet"
      description="Projects group your issues, docs and members."
      actions={
        <>
          <Button variant="outline">Import</Button>
          <Button>New project</Button>
        </>
      }
    />
  ),
  Search: () => (
    <EmptyState
      variant="card"
      className="w-[28rem]"
      icon={<I d="m21 21-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16" />}
      title='No results for "invoces"'
      description="Check the spelling or try a broader search."
      actions={<Button variant="ghost">Clear search</Button>}
    />
  ),
}

Source: packages/ui/src/empty-state/empty-state.tsx

Catalog