Axie UI
Recipe

Upload queue

An import queue with mixed completed, active, and loading file rows.

Preview

Files

Import queue

vendor-rates.csv

2.4 MB

Done

april-ledger.xlsx

8.8 MB

47%

Ingredients

The recipe only uses documented Axie primitives.

ProgressList RowBadgeSkeletonButton

Accessibility

  • Announce import progress as text next to each file, not only in a bar.
  • Keep loading rows visually similar to completed rows so layout does not jump.
  • Use status badges for each file outcome and one progress bar for the batch.

Code

code
<div className="grid gap-4">  <Progress value={47} tone="accent" />  <div className="divide-y divide-axie-line">    <ListRow title="vendor-rates.csv" action={<Badge tone="accent">Done</Badge>} />    <ListRow title="april-ledger.xlsx" action={<Badge tone="info">47%</Badge>} />    <Skeleton className="h-4 w-2/3" />  </div></div>