Components

Exit this page

Give users a way to quickly and safely exit a service, website or application.

For service journeys, you must use this component with the Exit a page quickly pattern.

Open this example in a new tab: exit this page
HTML
<div class="govuk-exit-this-page" data-module="govuk-exit-this-page">
  <a href="https://www.bbc.co.uk/weather" role="button" draggable="false" class="govuk-button govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button" data-module="govuk-button" rel="nofollow noreferrer">
    <span class="govuk-visually-hidden">Emergency</span> Exit this page
  </a>
</div>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
text string Text for the link. If html is provided, the text option will be ignored. Defaults to "Emergency Exit this page" with ‘Emergency’ visually hidden.
html string HTML for the link. If html is provided, the text option will be ignored. Defaults to "Emergency Exit this page" with ‘Emergency’ visually hidden.
redirectUrl string URL to redirect the current tab to. Defaults to "https://www.bbc.co.uk/weather".
id string ID attribute to add to the exit this page container.
classes string Classes to add to the exit this page container.
attributes object HTML attributes (for example data attributes) to add to the exit this page container.
activatedText string Text announced by screen readers when Exit this Page has been activated via the keyboard shortcut. Defaults to "Loading.".
timedOutText string Text announced by screen readers when the keyboard shortcut has timed out without successful activation. Defaults to "Exit this page expired.".
pressTwoMoreTimesText string Text announced by screen readers when the user must press Shift two more times to activate the button. Defaults to "Shift, press 2 more times to exit.".
pressOneMoreTimeText string Text announced by screen readers when the user must press Shift one more time to activate the button. Defaults to "Shift, press 1 more time to exit.". 
{% from "govuk/components/exit-this-page/macro.njk" import govukExitThisPage %}

{{ govukExitThisPage() }}

When to use this component

Use the component on pages with sensitive information that could:

  • put someone at risk of abuse or retaliation
  • reveal someone’s plans to avoid or escape from harm

For example, when a potential victim is using a service to help them leave a domestic abuser.

You can use this component on either:

  • all the pages in a service
  • parts of the journey with sensitive information

You can also use this component for standalone content pages, such as dashboards and guidance.

When not to use this component

Do not use this component if the service or content is unlikely to put a user at risk. See the Exit a page quickly pattern for examples of at-risk and sensitive topics.

The ‘Exit this page’ component is a Button component that has been marked up with addtional CSS and JavaScript functionality, to make it work in a specific way.

Keep in mind that seeing this component might discourage certain users from using your service. If the user does not identify themselves as being at risk, they might see the button on a service and decide it’s not relevant to them.

How it works

There are 2 ways to use this component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

Adding the button

Position the component at the top of your page, above the beginning of the grid (<div class="govuk-grid-row">) but still within the width container (<div class="govuk-width-container">).

Choosing a different website to load

When activated, the component by default will take the user to the homepage of BBC Weather. You can change this if there’s a more appropriate site for your users.

Avoid websites that might show personalised pages (such as frequently visited, last visited or suggested links), as this content could put the user at risk.

Add the code for the ‘secondary link’ into the layout file of your service. The ‘secondary link’ is an additional govuk-skip-link that works in a similar way. Place it under the page template’s default skip link at the very top of the body.

When the user interacts with the ‘secondary link’, it will perform the same action as pressing the button to activate Exit this Page.

Open this example in a new tab: secondary link – exit this page
HTML
<p class="govuk-body">To view the secondary link, tab to or click inside this example and then press tab.</p>
<a href="https://bbc.co.uk/weather/" class="govuk-skip-link govuk-js-exit-this-page-skiplink" rel="nofollow noreferrer" data-module="govuk-skip-link">Exit this page</a>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
text string Text for the link. If html is provided, the text option will be ignored. Defaults to "Emergency Exit this page" with ‘Emergency’ visually hidden.
html string HTML for the link. If html is provided, the text option will be ignored. Defaults to "Emergency Exit this page" with ‘Emergency’ visually hidden.
redirectUrl string URL to redirect the current tab to. Defaults to "https://www.bbc.co.uk/weather".
id string ID attribute to add to the exit this page container.
classes string Classes to add to the exit this page container.
attributes object HTML attributes (for example data attributes) to add to the exit this page container.
activatedText string Text announced by screen readers when Exit this Page has been activated via the keyboard shortcut. Defaults to "Loading.".
timedOutText string Text announced by screen readers when the keyboard shortcut has timed out without successful activation. Defaults to "Exit this page expired.".
pressTwoMoreTimesText string Text announced by screen readers when the user must press Shift two more times to activate the button. Defaults to "Shift, press 2 more times to exit.".
pressOneMoreTimeText string Text announced by screen readers when the user must press Shift one more time to activate the button. Defaults to "Shift, press 1 more time to exit.". 
{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}

<p class="govuk-body">To view the secondary link, tab to or click inside this example and then press tab.</p>

{{ govukSkipLink({
  text: "Exit this page",
  href: "https://bbc.co.uk/weather/",
  classes: "govuk-js-exit-this-page-skiplink",
  attributes: {
    "rel": "nofollow noreferrer"
  }
}) }}

The href for the ‘secondary link’ should be the same as the URL used for the button.

The component will still work if the ‘secondary link’ is not added, but it’ll be less accessible overall.

Consider what to do with user session data

You’ll need to decide if your service will store the user’s session data after they’ve activated the Exit this page component and left your service.

For example, you could do this in 2 steps:

  1. replace the default website link to a URL in your service, that when visited, will clear the user’s session data
  2. redirect the user to another website, such as BBC Weather

Enhancement features

These features are included in the component and should work automatically, as long as the user has enabled Javascript in their browser. You do not need to do anything to make these work.

Loading overlay

The ‘loading overlay’ will appear immediately when the user activates Exit this page.

The overlay helps users with slow connections clear their screen until the browser loads the next page.

Showing progress for ‘shift key’ presses

To show the user the number of times they’ve pressed the shift button, there’s a series of 3 progress dots under the button, provided as a visual enhancement. Each time the shift key is pressed, one of the dots will be filled.

The user has 5 seconds to press the shift key 3 times. After that, the sequence and progress dots will reset.

Accessibility features and considerations

In addition to the Exit this page button itself, users have 2 other options to activate the component. We’ve tested and iterated both of these options to be accessible, reliable and as discreet as possible for users.

The keyboard option, where the user can press shift 3 times, gives users a discreet way to activate the component, particularly keyboard-only users. We considered options that used a single key press (such as the ‘esc’ key), but we could not be confident that this would not interfere with other user actions.

The ‘secondary link’ option is a hidden link in the tab order of the page. This gives users of assistive technology an easier way to reliably activate the component.

To help users of speech recognition software activate the ‘secondary link’ more discreetly, we considered changing the link text to something else that hid its real purpose.

However, we decided this was more likely to confuse users. We’re also confident about the other ways users can use speech recognition software to activate the ‘secondary link’ without saying the text out loud, such as choosing the link as an item number on a list.

Research on this component

The design of this component is based on research with people with a lived experience of domestic abuse and people with accessibility needs, and in consultation with the Ministry of Justice, Department for Work and Pensions and the Scottish Government.

We plan to show more information about how many services use this component.

Known issues and gaps

We’ve tested this component mainly with users at risk of domestic abuse. However we’ve not done extensive testing with any other user groups.

Before using this component, you should do research with your users. If you do, we’d welcome any feedback and findings you can share with us.

We’re particularly interested in investigations into how well this component works on static pages of information (‘flat content’).

Share your feedback, use cases and research findings on the Exit this page discussion space on GitHub.

We also share notes about our decisions, work and research in the GitHub discussion space and welcome your feedback on those.

Help improve this component

To help make sure that this page is useful, relevant and up to date, you can:

Tell us if your service uses this component

Take part in our usage survey (opens in a new tab) to help us improve this component to better meet the needs of the services that use it.

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.