Components Page header actions

Open this example in a new window

<div class="moj-page-header-actions">
  <div class="moj-page-header-actions__title">
    <h1 class="govuk-heading-xl">Documents</h1>
  </div>

  <div class="moj-page-header-actions__actions">
    <div class="moj-button-group moj-button-group--inline">

      <button type="submit" class="govuk-button govuk-button--secondary" data-module="govuk-button">
        Upload new
      </button>

      <button type="submit" class="govuk-button govuk-button--secondary" data-module="govuk-button">
        Share collection
      </button>

    </div>
  </div>

</div>

{% from "moj/components/page-header-actions/macro.njk" import mojPageHeaderActions %}

{{ mojPageHeaderActions({
  heading: {
    text: 'Documents'
  },
  items: [{
    text: 'Upload new',
    classes: 'govuk-button--secondary'
  }, {
    text: 'Share collection',
    classes: 'govuk-button--secondary'
  }]
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

When to use

Use the page header actions component for certain actions.

Use this when:

• the content of the page is so long that users have to scroll past it to see actions. For example, having a “Create case” button underneath a long list of cases.
• the action is applied to the page item and not one specific part of the content. For example, in a user profile page, it could make sense to put the “Suspend user” action in the header.

When not to use

Don’t place buttons next to the header when they are specific to a component within the page.

How to use

The component ensures the buttons are aligned right in line with the heading. On small screens the buttons tuck underneath the heading.

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

• how you have used this component in your service
• any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the page header actions discussion on Github.