Component reference

EmptyState

What a region shows while it has nothing: artwork, a title, a line of help and an optional next step.

Preview

Description and next step

The real empty-state component and its action entry. The button only records the action locally; no real work is created.

packages/meowtail/stories/foundation.stories.tsxline 377tsx

render: () => (
  <div className="workshop-foundation-empty-grid">
    <section className="workshop-foundation-empty-sample">
      <h2 className="workshop-section-title">No content yet · Offer a next step</h2>
      <EmptyState
        title="No work outcomes yet"
        copy="Tell Assistant what you want to move forward; completed outcomes appear here."
        action={<Button data-empty-start>Start a conversation</Button>}
      />
      <Note data-feedback role="status" />
    </section>
    <section className="workshop-foundation-empty-sample">
      <h2 className="workshop-section-title">All handled · No action needed</h2>
      <EmptyState title="No changes are awaiting review" />
    </section>
    <section className="workshop-foundation-empty-sample">
      <h2 className="workshop-section-title">Custom mark · Caller artwork</h2>
      <EmptyState
        title="Nothing in this folder"
        copy="Choose another place, or add the first file."
        illustration={
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path
              d="M4 8h6l2 2h8v8H4z"
              fill="none"
              stroke="currentColor"
              stroke-linejoin="round"
            />
          </svg>
        }
      />
    </section>
  </div>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { EmptyState } from "meowtail";

<EmptyState
  title="No work outcomes yet"
  copy="Tell Assistant what you want to move forward; completed outcomes appear here."
  action={<Button>Start a conversation</Button>}
/>

Examples

The other stories that show this component.

Local reading and editing area

Page-level and local empty states share one structure; local descriptions keep a reading scale, and actions sit next to the corresponding empty area.

packages/meowtail/stories/foundation.stories.tsxline 433tsx

render: () => (
  <Stack>
    <Field label="Directory filter" htmlFor="compact-empty-filter">
      <Input id="compact-empty-filter" placeholder="Enter a file name" />
    </Field>
    <Grid minColumnWidth="normal">
      <Card>
        <EmptyState
          size="compact"
          title="Select a file"
          copy="Select from the file list on the left to view full content and a local editing draft here."
        />
      </Card>
      <Card>
        <EmptyState
          size="compact"
          title="No file changes"
          copy="There are no displayable changes in the working directory or the staging area. You can still view history; long paths do not change the reading scope of the empty state."
          action={<Button variant="outline">View history</Button>}
        />
      </Card>
    </Grid>
    <EmptyState
      title="The workspace is still empty"
      copy="Open an existing directory or create the first file."
      action={<Button>Create file</Button>}
    />
  </Stack>
)

API reference

Props

Prop	Type	Default
`size`	`"default" \| "compact"`	`"default"`
`title`Required	`string`	–
`copy`	`string`	–
`action`	`Child`	–
`illustration`Artwork above the title. Omitted uses `EmptyStack`. `null` and `false` leave the illustration part out. Presence is fixed for the mount.	`Child`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

rootillustrationtitledescriptionaction

Registry

The component is registered as empty-state in the meowtail component registry.