Empty

One muted line for a Card with nothing in it yet.

Overview

A short note inside a Card or a list that has nothing to show; a whole empty view is an EmptyState.

Empty note

Do

Done

0

Nothing finished yet.

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

<Card title="Done" count={0}>
  <Empty>Nothing finished yet.</Empty>
</Card>
Empty is the one muted line inside a Card that has nothing to show yet.
Don't

Done

0

Nothing finished yet.

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

<Card title="Done" count={0}>
  <p>Nothing finished yet.</p>
</Card>
A bare <p> in a Card has its own colour and size, so it drifts from every other empty Card: use Empty.

Empty view

Do

No projects yet

Projects collect the shots you upload.
import { Body, Button, EmptyState } from "@hackcove/ui";

<EmptyState title="No projects yet" actions={<Button>Create a project</Button>}>
  <Body>Projects collect the shots you upload.</Body>
</EmptyState>
A whole view with nothing in it, and a way forward, is an EmptyState with its actions.
Don't

No projects yet.

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

<Stack>
  <Empty>No projects yet.</Empty>
  <Button>Create a project</Button>
</Stack>
Empty is one muted line, not a view: with a button under it nothing says what the page is for. Use EmptyState.

Usage

  • Use Empty for one short sentence in a muted tone: "Nothing finished yet."
  • Put it inside a Card (give the Card its title and count) or under a list; do not style a paragraph by hand.
  • A whole page or list with nothing in it, and a way forward, is an EmptyState with its actions, not an Empty.
  • Empty is not a place for a button or a link; if the person needs to do something next, use EmptyState.

Accessibility

  • Empty is a plain <p>: it is read in order with the rest of the Card, with no role of its own.
  • aria-* and data-* props go on the paragraph.

API

Empty