Exit this page
Give users a way to quickly and safely exit a service, website or application.
Get the Nunjucks macro for this example from the Camden Frontend library
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.
The ‘Exit this page’ component is a button component that has been marked up with additional 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 the exit this page component. You can use HTML or, if you are using Nunjucks, 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 Google Search. 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.
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:
replace the default website link to a URL in your service, that when visited, will clear the user’s session data
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.
Research on this component
This component is based on the exit this page component from the GOV.UK Design System.
You can take part in the ‘Exit this page' discussion on GOV.UK’s Design System’s GitHub and share your research.