With Actions
A page title paired with buttons on the right for primary and secondary actions. Use it atop list or detail views where users create or edit.
A page title paired with buttons on the right for primary and secondary actions. Use it atop list or detail views where users create or edit.
Search blocks by description or jump to a page.
With Actions is a page heading that splits into two horizontal zones. On the left, a large bold title sits above a metadata row that combines a calendar icon, an update date, and two dot-separated tags for document properties such as page count and file type. On the right, a pair of buttons sits on the same baseline as the title: an outline button for a secondary action and a filled button for the primary action, each with a small leading icon.
The two zones stack vertically on small screens and shift to a single row on medium screens and above. The title text, metadata items, and button labels are all independent copy, so you can swap in any document name, substitute different tags, add or remove metadata dots, and change the button icons without touching the layout.
Reach for this block at the top of a detail or list view where users need to act immediately. It works well on a logistics platform where a dispatcher opens a shipment record and needs quick access to export or forward the document. It is a better fit than a centered heading when there is always at least one primary action available, and a better fit than a heading with filters when the page is a single record rather than a searchable table.
A natural flow around it on an Application page:
Before
After
The two action buttons and the metadata row can each be adjusted to fit your document or record type:
Tip: keep the button row to two actions at most so the heading stays balanced; move any additional operations into a dropdown or overflow menu.