EmptyState

A whole page or list with no content yet: say what belongs here and offer the first step.

import { Body, Button, EmptyState } from "@hackcove/ui";

<EmptyState title="No builds yet" actions={<Button>Create a project</Button>}>
  <Body as="p">Builds appear here once a project has uploaded its first capture.</Body>
</EmptyState>

import { EmptyState } from "@hackcove/ui";

<EmptyState title="Nothing here" />

import { Card, Empty } from "@hackcove/ui";

<Card title="Builds">
  <Empty>No builds yet.</Empty>
</Card>

import { Body, Card, EmptyState } from "@hackcove/ui";

<Card title="Builds">
  <EmptyState title="No builds yet">
    <Body as="p">Builds appear here once a project has uploaded its first capture.</Body>
  </EmptyState>
</Card>

• Give it a title, one Body as="p" that says what belongs here, and the first step as actions, with the primary Button first.
• For a get-started list, put Steps after the Body in the children.
• One muted line inside a card, for an empty table or list, is Empty, not an EmptyState.
• Do not leave it as a title alone: a page with nothing in it and nothing to do is a dead end.

• An EmptyState is a <section> named by its title, which is an h2, so it is a landmark region a screen reader can jump to.
• The actions are ordinary buttons and links, in reading order after the explanation.