Exit this page

Give users a way to quickly and safely exit a service, website or application. Keyboard-only users can quickly tap the shift key 3 times to exit the page.

Exit this page with no parameters

When called with no additional arguments the component renders a button that links to BBC Weather. The default link target can be changed in the library configuration options.

Input

= govuk_exit_this_page

<%= govuk_exit_this_page %>

Output

<div class="govuk-exit-this-page" data-module="govuk-exit-this-page">
  <a class="govuk-button govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button" data-module="govuk-button" href="https://www.bbc.co.uk/weather">
    Exit this page
  </a>
</div>

Exit this page with custom text and URL

Both the link text and redirect URL can be overridden with arguments. For consistency with other link helpers, href can be used instead of redirect_url.

Input

= govuk_exit_this_page(text: "Leave this page", redirect_url: "https://www.bbc.co.uk/news")

<%= govuk_exit_this_page(text: "Leave this page", redirect_url: "https://www.bbc.co.uk/news") %>

Output

<div class="govuk-exit-this-page" data-module="govuk-exit-this-page">
  <a class="govuk-button govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button" data-module="govuk-button" href="https://www.bbc.co.uk/news">
    Leave this page
  </a>
</div>

Exit this page with custom HTML

Any HTML can be provided to the exit this page component using a block.

Input

= govuk_exit_this_page(redirect_url: "https://www.wikipedia.org") do
  strong Exit this page now

<%= govuk_exit_this_page(redirect_url: "https://www.wikipedia.org") do %><strong>Exit this page now</strong>
<% end %>

Output

<div class="govuk-exit-this-page" data-module="govuk-exit-this-page">
  <a class="govuk-button govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button" data-module="govuk-button" href="https://www.wikipedia.org">
    <strong>
      Exit this page now
    </strong>
  </a>
</div>

Adding a secondary link to the top of the page

In addition to the component a link can be added alongside the skip link that allows people to quickly exit the site using their keyboard.

Input

p To view the skip link component, tab to this example --- or click inside this example and press tab.

= govuk_exit_this_page_link

<p>To view the skip link component, tab to this example --- or click inside this example and press tab.
</p>
<%= govuk_exit_this_page_link %>

Output

To view the skip link component, tab to this example — or click inside this example and press tab.

Exit this page

<p>
  To view the skip link component, tab to this example --- or click inside this example and press tab.
</p>
<a class="govuk-skip-link govuk-js-exit-this-page-skiplink" data-module="govuk-skip-link" href="https://www.bbc.co.uk/weather">
  Exit this page
</a>

Overriding the assistive text

When operating in keyboard mode screen readers will announce the following events:

• activation (configured with activated_text)
• timing out (configured with timed_out_text)
• press two more times to exit (configured with press_two_more_times_text)
• press one more time to exit (configured with press_one_more_time_text)

The defaults can be overwritten application wide by setting the appropriate values in the configuration.

Input

= govuk_exit_this_page(activated_text: "Leave now", timed_out_text: "Exit has timed out", press_two_more_times_text: "Press shift twice to leave", press_one_more_time_text: "Press shift once more to leave")

<%= govuk_exit_this_page(activated_text: "Leave now", timed_out_text: "Exit has timed out", press_two_more_times_text: "Press shift twice to leave", press_one_more_time_text: "Press shift once more to leave") %>

Output

<div class="govuk-exit-this-page" data-module="govuk-exit-this-page" data-i18n.activated="Leave now" data-i18n.timed-out="Exit has timed out" data-i18n.press-two-more-times="Press shift twice to leave" data-i18n.press-one-more-time="Press shift once more to leave">
  <a class="govuk-button govuk-button--warning govuk-exit-this-page__button govuk-js-exit-this-page-button" data-module="govuk-button" href="https://www.bbc.co.uk/weather">
    Exit this page
  </a>
</div>