Heading actions

[wellhairy]

Heading actions

What

The heading actions component provides a structured way to display primary page actions alongside the H1 heading. These actions, such as "Edit," "Save," "Export," etc, are positioned consistently with the H1 to show that they belong to the page and not any other navigation. This will ensure clear visibility and easy access without disrupting the page hierarchy.

Why

Placing key actions next to the main heading improves usability by making essential controls immediately accessible. This approach enhances clarity, reduces cognitive load, and ensures consistency across a design system.

Summary

The heading actions component enhances usability by making primary actions easily discoverable and accessible. Standardising heading actions helps maintain a predictable user experience. The component will need supports different layouts, heading legths and responsive behaviour so we might need to adapt the MOJ design to better accomadate mobile.

Examples

MOJ design system
https://design-patterns.service.justice.gov.uk/components/page-header-actions/
https://design-patterns.service.justice.gov.uk/examples/page-header-actions/

MOJ Desktop

MOJ Mobile