Build / Molecules

EmptyState

molecule
play-fn

The zero-data state for a list or surface.

Every list in MeetCard has a meaningful empty state — a Rolodex with no connections yet, a company with no events, a search with no matches — and each is an opportunity to point at the next action rather than show a void.

import { EmptyState } from '@meetcard/deck'

Example

<EmptyState title="No connections yet" description="Scan a card or share yours to start building your deck." actions={<Button>Exchange a card</Button>} />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <EmptyState
    title="No connections yet"
    description="Scan a card or share yours to start building your deck." />;

Every empty state should point at the next action.

With Action

Source

const WithAction = () => <EmptyState
    title="No connections yet"
    description="Scan a card or share yours to start building your deck."
    media={<CardsIcon />}
    actions={<Button>Exchange a card</Button>} />;

Compact variant, for empty states nested inside a panel or a search list.

Small

Source

const Small = () => <EmptyState
    title="No matches"
    description="Try a different name, company, or tag."
    size="sm" />;

With media and actions: say what would fill it, and offer the way to start.

No Results

Source

const NoResults = () => <EmptyState
    title="No events yet"
    description="Events you attend or manage will appear here."
    media={<CardsIcon />}
    actions={(<>
      <Button size="sm">Create an event</Button>
      <Button size="sm" variant="ghost">
        Browse events
      </Button>
    </>)} />;

Props

Prop	Type	Default	Description
`title`required	`ReactNode`	—	—
`actions`	`ReactNode`	—	The next step — usually a single primary Button.
`description`	`ReactNode`	—	—
`media`	`ReactNode`	—	Decorative illustration or icon. Hidden from assistive tech.
`size`	`'sm' \| 'md'`	`'md'`	—

Also accepts everything from Omit, so id, data-* and event handlers pass straight through.