Recipe

Billing table

A billing view that combines summary stats, table rows, status badges, and inline notes.

Preview

Collected$8,428

Pending$642

Failed2

Invoice	Status	Amount
AX-1048	Paid	$184.20
AX-1047	Pending	$642.18
AX-1046	Failed	$91.40

Standard exportInclude paid and pending invoices.Finance exportInclude failed invoices and retry notes.

Ingredients

The recipe only uses documented Axie primitives.

TableBadgeStatSeparatorRadio Group

Accessibility

Use table headers for every column and keep numeric columns aligned consistently.
Do not hide important payment state inside color. Include status text in the table.
Pair destructive billing actions with a confirmation dialog or secondary review step.

Code

code

<Table>  <TableHeader>    <TableRow>      <TableHead>Invoice</TableHead>      <TableHead>Status</TableHead>      <TableHead>Amount</TableHead>    </TableRow>  </TableHeader>  <TableBody>    <TableRow>      <TableCell>AX-1048</TableCell>      <TableCell><Badge tone="accent">Paid</Badge></TableCell>      <TableCell>$184.20</TableCell>    </TableRow>  </TableBody></Table>