The leave button gives users a way to quickly and safely exit a service, website or application and keep users safe by helping them to protect their privacy.

{{ aspExample({ code: "<a class=\"leave-site\" href=\"https://www.google.com\" id=\"leaveSiteButton\" data-keys=\"Escape,Esc\"><span class=\"sr-only\" style=\"display:none\">To quickly exit this site, press the Escape key or use this </span> Leave site</a>", nunjucks: "{{ aspLeaveSite() }}", title: "", id: "65a92cdb24fb5", url: "" }) }}

When to use this component

Use the component on pages with sensitive information that could:

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

You can use this component on either:

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.

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

If the component is present, it should be the first component within the order of the page.

When activated, the component by default will take the user to a Google search page.

If JavaScript is enabled, the function can be activated by pressing the escape/esc key and an additional tab will open, taking the user to the homepage of BBC Weather. The page when the button is clicked will be removed from the browser history.

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.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.


{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–yellow">In Progress</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}