Order History
An order history composed from tables, badges, pagination and detail drawers.
Recent orders
Keep order identifiers as row headers, use text labels for every status and place wide tables in a labelled, keyboard-scrollable region. Each details button opens a modal drawer whose name identifies the selected order.
Your orders
Orders placed between June and September 2026.
| Order | Placed | Items | Total | Status | Details |
|---|---|---|---|---|---|
| #1048 | 3 | €128.40 | Delivered | ||
| #1041 | 1 | €49.90 | In transit | ||
| #1026 | 2 | €86.00 | Processing | ||
| #1019 | 4 | €214.75 | Refunded | ||
| #1007 | 1 | €72.50 | Cancelled |
<section aria-labelledby="order-history-heading">
<header class="d-flex flex-wrap align-items-center gap-2 py-3 mb-3">
<div>
<h3 class="h4 mb-0" id="order-history-heading">Your orders</h3>
<p class="text-muted mb-0" id="order-history-description">
<span>Orders placed between June and September 2026.</span>
</p>
</div>
<span class="badge bg-primary ms-auto">24 orders</span>
</header>
<div
class="table-responsive card shadow-sm"
role="region"
tabindex="0"
aria-labelledby="order-history-heading"
aria-describedby="order-history-description">
<table class="table table-striped table-hover mb-0">
<caption class="text-start">Most recent orders</caption>
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Placed</th>
<th scope="col">Items</th>
<th scope="col">Total</th>
<th scope="col">Status</th>
<th scope="col">Details</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#1048</th>
<td><time datetime="2026-09-04">Sep 4, 2026</time></td>
<td>3</td>
<td><data value="128.40">€128.40</data></td>
<td><span class="badge bg-success">Delivered</span></td>
<td>
<button
class="btn btn-text btn-primary"
type="button"
aria-controls="order-detail-1048"
aria-expanded="false"
data-order-drawer-target="#order-detail-1048">
<span>View details</span>
</button>
</td>
</tr>
<tr>
<th scope="row">#1041</th>
<td><time datetime="2026-08-27">Aug 27, 2026</time></td>
<td>1</td>
<td><data value="49.90">€49.90</data></td>
<td><span class="badge bg-primary">In transit</span></td>
<td>
<button
class="btn btn-text btn-primary"
type="button"
aria-controls="order-detail-1041"
aria-expanded="false"
data-order-drawer-target="#order-detail-1041">
<span>View details</span>
</button>
</td>
</tr>
<tr>
<th scope="row">#1026</th>
<td><time datetime="2026-08-12">Aug 12, 2026</time></td>
<td>2</td>
<td><data value="86.00">€86.00</data></td>
<td><span class="badge bg-warning">Processing</span></td>
<td>
<button
class="btn btn-text btn-primary"
type="button"
aria-controls="order-detail-1026"
aria-expanded="false"
data-order-drawer-target="#order-detail-1026">
<span>View details</span>
</button>
</td>
</tr>
<tr>
<th scope="row">#1019</th>
<td><time datetime="2026-07-21">Jul 21, 2026</time></td>
<td>4</td>
<td><data value="214.75">€214.75</data></td>
<td><span class="badge bg-inverse">Refunded</span></td>
<td>
<button
class="btn btn-text btn-primary"
type="button"
aria-controls="order-detail-1019"
aria-expanded="false"
data-order-drawer-target="#order-detail-1019">
<span>View details</span>
</button>
</td>
</tr>
<tr>
<th scope="row">#1007</th>
<td><time datetime="2026-06-30">Jun 30, 2026</time></td>
<td>1</td>
<td><data value="72.50">€72.50</data></td>
<td><span class="badge bg-error">Cancelled</span></td>
<td>
<button
class="btn btn-text btn-primary"
type="button"
aria-controls="order-detail-1007"
aria-expanded="false"
data-order-drawer-target="#order-detail-1007">
<span>View details</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination justify-content-center mt-4" aria-label="Order history pages">
<span class="pagination-item disabled">Previous</span>
<a class="pagination-item is-active" href="?page=1#order-history-heading" aria-current="page">1</a>
<a class="pagination-item" href="?page=2#order-history-heading" aria-label="Page 2">2</a>
<a class="pagination-item" href="?page=3#order-history-heading" aria-label="Page 3">3</a>
<a class="pagination-item" href="?page=2#order-history-heading">Next</a>
</nav>
<div
class="drawer"
id="order-detail-1048"
role="dialog"
aria-modal="true"
aria-labelledby="order-detail-1048-title"
aria-hidden="true"
inert
data-order-detail-drawer>
<div class="drawer-header">
<p class="drawer-title h6" id="order-detail-1048-title">Order #1048</p>
<button class="icon-btn ms-auto" type="button" aria-label="Close order #1048 details" data-order-drawer-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="drawer-body">
<div class="d-flex flex-column gap-3">
<div><span class="badge bg-success">Delivered</span></div>
<section aria-labelledby="order-detail-1048-summary">
<h3 class="h5" id="order-detail-1048-summary">Delivery summary</h3>
<p>Delivered on September 6, 2026 to Alex Morgan in Berlin.</p>
</section>
<section aria-labelledby="order-detail-1048-items">
<h3 class="h5" id="order-detail-1048-items">3 items</h3>
<ul>
<li>Utility hoodie — €64.00</li>
<li>Component notebook — €24.50</li>
<li>Design token cards — €39.90</li>
</ul>
</section>
<p class="h5 mb-0">Total: €128.40</p>
<a class="btn btn-outline btn-primary" href="#order-history-heading">Download invoice</a>
</div>
</div>
</div>
<div
class="drawer"
id="order-detail-1041"
role="dialog"
aria-modal="true"
aria-labelledby="order-detail-1041-title"
aria-hidden="true"
inert
data-order-detail-drawer>
<div class="drawer-header">
<p class="drawer-title h6" id="order-detail-1041-title">Order #1041</p>
<button class="icon-btn ms-auto" type="button" aria-label="Close order #1041 details" data-order-drawer-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="drawer-body">
<div class="d-flex flex-column gap-3">
<div><span class="badge bg-primary">In transit</span></div>
<section aria-labelledby="order-detail-1041-summary">
<h3 class="h5" id="order-detail-1041-summary">Delivery summary</h3>
<p>Estimated delivery: September 9, 2026. Tracking number CU-9041-82.</p>
</section>
<section aria-labelledby="order-detail-1041-items">
<h3 class="h5" id="order-detail-1041-items">1 item</h3>
<ul><li>Accessibility field guide — €49.90</li></ul>
</section>
<p class="h5 mb-0">Total: €49.90</p>
<a class="btn btn-outline btn-primary" href="#order-history-heading">Track shipment</a>
</div>
</div>
</div>
<div
class="drawer"
id="order-detail-1026"
role="dialog"
aria-modal="true"
aria-labelledby="order-detail-1026-title"
aria-hidden="true"
inert
data-order-detail-drawer>
<div class="drawer-header">
<p class="drawer-title h6" id="order-detail-1026-title">Order #1026</p>
<button class="icon-btn ms-auto" type="button" aria-label="Close order #1026 details" data-order-drawer-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="drawer-body">
<div class="d-flex flex-column gap-3">
<div><span class="badge bg-warning">Processing</span></div>
<section aria-labelledby="order-detail-1026-summary">
<h3 class="h5" id="order-detail-1026-summary">Order summary</h3>
<p>Preparing for shipment. The order can no longer be edited.</p>
</section>
<section aria-labelledby="order-detail-1026-items">
<h3 class="h5" id="order-detail-1026-items">2 items</h3>
<ul>
<li>Grid poster set — €52.00</li>
<li>Spacing scale ruler — €34.00</li>
</ul>
</section>
<p class="h5 mb-0">Total: €86.00</p>
</div>
</div>
</div>
<div
class="drawer"
id="order-detail-1019"
role="dialog"
aria-modal="true"
aria-labelledby="order-detail-1019-title"
aria-hidden="true"
inert
data-order-detail-drawer>
<div class="drawer-header">
<p class="drawer-title h6" id="order-detail-1019-title">Order #1019</p>
<button class="icon-btn ms-auto" type="button" aria-label="Close order #1019 details" data-order-drawer-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="drawer-body">
<div class="d-flex flex-column gap-3">
<div><span class="badge bg-inverse">Refunded</span></div>
<section aria-labelledby="order-detail-1019-summary">
<h3 class="h5" id="order-detail-1019-summary">Refund summary</h3>
<p>€214.75 was returned to the original payment method on July 28, 2026.</p>
</section>
<section aria-labelledby="order-detail-1019-items">
<h3 class="h5" id="order-detail-1019-items">4 items</h3>
<p>All items from this order were returned.</p>
</section>
<p class="h5 mb-0">Refunded: €214.75</p>
</div>
</div>
</div>
<div
class="drawer"
id="order-detail-1007"
role="dialog"
aria-modal="true"
aria-labelledby="order-detail-1007-title"
aria-hidden="true"
inert
data-order-detail-drawer>
<div class="drawer-header">
<p class="drawer-title h6" id="order-detail-1007-title">Order #1007</p>
<button class="icon-btn ms-auto" type="button" aria-label="Close order #1007 details" data-order-drawer-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="drawer-body">
<div class="d-flex flex-column gap-3">
<div><span class="badge bg-error">Cancelled</span></div>
<section aria-labelledby="order-detail-1007-summary">
<h3 class="h5" id="order-detail-1007-summary">Cancellation summary</h3>
<p>Cancelled on June 30, 2026 before payment was captured.</p>
</section>
<section aria-labelledby="order-detail-1007-items">
<h3 class="h5" id="order-detail-1007-items">1 item</h3>
<ul><li>Color contrast deck — €72.50</li></ul>
</section>
<p class="h5 mb-0">Total: €72.50</p>
</div>
</div>
</div>
<div
class="overlay"
id="order-history-overlay"
aria-hidden="true"
data-order-drawer-overlay></div>
</section>