Order History

What is an order history component?

An order history component shows a customer the orders they have placed: order numbers, dates, totals, status and links to details, invoices or tracking. It usually lives in the account area of an online store, but the same patterns work for subscription billing pages, B2B portals and marketplaces. Typical layouts include an order list, an expandable order card, an invoice view and a shipment tracking timeline.

When to use an order history layout

• Show the most recent orders first and make the order number, date, total and status visible without opening anything.
• Use clear status labels such as "Processing", "Shipped" or "Delivered", combined with a colour badge rather than colour alone.
• Group the actions customers actually need: view details, download invoice, track parcel, buy again, return an item.
• Paginate or load more for long histories, and add a filter by date or status when customers order often.
• On mobile, turn wide tables into stacked cards so nothing needs horizontal scrolling.

Accessibility and best practices

If you use a table, give it a caption and proper th header cells with scope. Progress or tracking steps should expose the current step in text, for example "Step 3 of 4: Out for delivery". Make icon-only actions accessible with an aria-label. Keep dates in an unambiguous format and use the time element. Invoice views should print cleanly, so test a simple print stylesheet that hides navigation.

Framework versions

Every order history example has a live preview, code tabs, a copy button and a download option. Bootstrap 6 versions are built on the new alpha with theme-* colour roles for status badges, Bootstrap 5 versions use tables, cards and list groups, and the Tailwind CSS and pure CSS versions rely on plain HTML and utility classes. Use the framework filter to pick your stack, copy the markup and connect it to your own order data from the backend.