Data display

PageHeader

Breadcrumbs, title, badge and actions for list and detail pages.

@codeways/ui/page-header

Detail page

Breadcrumbs (last crumb not a link), an icon well, title, status badge, a 2-4 fact description line, and right-aligned actions.

Lanka Tea Exports

ActiveZoho imported

Customer since 12 Mar 2024. AUD. Net 15.

List page

No icon well, no description line - just breadcrumbs, title and actions.

Invoices

Minimal

Title only - breadcrumbs, badges, description and actions are all optional.

Employees

Usage

import { PageHeader } from "@codeways/ui/page-header";

<PageHeader
  breadcrumbs={[{ label: "Customers", href: "/customers" }, { label: customer.name }]}
  title={customer.name}
  badge={<StatusBadge tone="success">Active</StatusBadge>}
  description="Customer since 12 Mar 2024. AUD. Net 15."
  actions={<><Button variant="secondary">Edit</Button><Button variant="primary">New invoice</Button></>}
/>