Axie UI
Recipe

Data toolbar

A searchable table header with scoped filters, status badges, and pagination.

Preview

RecordOwnerStatus
Invoice AX-1192Maris BelloReady
Contract CL-448Ilya VeranoReview
Payment PM-207Noor LazoFailed

Ingredients

The recipe only uses documented Axie primitives.

AutocompleteSelectTableBadgePagination

Accessibility

  • Keep filters in the tab order before the table so keyboard users can narrow results first.
  • Expose table headers and status text; badges should reinforce the state, not replace it.
  • Use a native combobox pattern for search and a listbox pattern for scoped filters.

Code

code
<div className="grid gap-4">  <div className="grid gap-3 lg:grid-cols-[1fr_210px_auto]">    <Autocomplete options={searchOptions} placeholder="Search table..." />    <Select options={statusOptions} defaultValue="active" />    <Button variant="soft">Export</Button>  </div>  <Table>{/* records */}</Table>  <Pagination>{/* pages */}</Pagination></div>