PageHeader
Page title row: icon + title (+ accessory) on the left, actions on the right.
import { PageHeader } from "@cynco-labs/ui";Example
import { ReceiptIcon } from "@phosphor-icons/react";
import { Badge, Button, PageHeader } from "@cynco-labs/ui";
export default function PageHeaderDemo() {
return (
<PageHeader
icon={<ReceiptIcon size={16} weight="fill" className="text-subtle" />}
title="Invoices"
titleAccessory={<Badge variant="muted">128</Badge>}
>
<Button variant="primary">Create invoice</Button>
</PageHeader>
);
}Use
Top of every list page; matches DataTable.Toolbar.
Props
icon (16px Phosphor fill in subtle), title, optional titleAccessory, actions as children.