EmptyState — Petanque Life Design

Absence-of-data surfaces. Always pair an illustration with copy that tells the user what to do next — never a naked "No data" message.

Example — empty match list

No matches yet

The cochonnet is thrown — your first match will appear here once someone plays.

tsx · view.tsx

import { EmptyState, Illustration } from '@petanque-life/shared';

<EmptyState
  illustration={<Illustration name="empty-matches" />}
  title="No matches yet"
  description="The cochonnet is thrown — your first match will appear here once someone plays."
  action={<Button onClick={create}>Create a match</Button>}
/>

API

Prop	Type	Default	Description
illustration	ReactNode	—	Recommended: <code><Illustration></code> from the T160 set.
title	string	—	Short, warm headline — avoid "No data".
description	string	—	One-sentence explainer of what should appear here.
action	ReactNode	—	Optional primary action — ideally the exact verb that will populate the state.
compact	boolean	false	Smaller illustration for constrained surfaces.