Empty State

A friendly placeholder for screens with no transactions, members, or results yet.

With icon and action

No transactions yet

Once a member makes a payment or a draft runs, it will show up here.

<EmptyState
  icon={<CardIcon />}
  title="No transactions yet"
  description="Once a member makes a payment or a draft runs, it will show up here."
  action={<Button>New payment</Button>}
/>

Multiple actions

No members match this filter

Try widening the date range, or import members from your previous billing system.

<EmptyState
  title="No members match this filter"
  description="Try widening the date range, or import members from your previous billing system."
  action={
    <>
      <Button variant="outline">Clear filters</Button>
      <Button>Import members</Button>
    </>
  }
/>

Text only

No disputes

You have no open disputes. Nice work keeping chargebacks at zero.

<EmptyState
  title="No disputes"
  description="You have no open disputes. Nice work keeping chargebacks at zero."
/>