A NSW Government website
NSW Government
Design System v3.24.2

Quick exit

Helps users leave a site immediately without drawing attention.

Figma

Usage

Use the Quick exit component on pages where a user could be at risk if someone else sees what they are viewing.

This includes content related to:

  • Family and domestic violence
  • Sexual or reproductive health
  • Mental health support
  • Other sensitive or high-risk topics

Quick exit is a safety mechanism, not a navigational tool. It should only be used when speed, discretion and predictability are essential.

Do

  • Use Quick exit on pages where user safety, privacy or comfort may be compromised.
  • Place it inside the global sticky container so it doesn't overlap with other components.
  • Ensure it redirects to a safe, neutral destination that loads quickly.
  • Test the component with keyboard and screen readers.

Don't

  • Show it on pages with no clear safety or privacy risk.
  • Hide it inside menus or page content.
  • Redirect users to content that could be confusing or draw attention.
  • Rely on JavaScript alone for core functionality.

Content guidelines

Exit button label

The label "Exit now" is fixed and must not be changed. This consistency ensures recognisability across all NSW Government websites and improves recognition in high-stress situations.

Instructional text

Briefly explain how the control works and mention the keyboard shortcut. Keep the language clear, calm and factual, and avoid wording that may increase stress.

Behaviour

The Quick exit control is positioned at the bottom of the viewport, and remain visible as users scroll.

Activating it immediately redirects the user to the configured safe URL.

When JavaScript is enabled:

  • The page is immediately concealed before navigation occurs, by applying display: none to the <html> element.
  • Users can activate the exit by pressing Esc twice within a one-second window.

Without JavaScript, the control still works as a standard link.

Behaviour is intentionally simple and predictable to reduce cognitive load under stress.

Customisations

Safe destination URL

Redirect users to a neutral, trusted page such as nsw.gov.au, bom.gov.au or google.com/hp. Choose and customise the destination based on who your users are and how they are likely to use the service, and test it to ensure it feels safe, appropriate and low-risk in context.

Double Esc key support

Quick exit can optionally be triggered by pressing the Esc key twice in quick succession within a one-second window.

This feature is enabled via enableEsc: true. It provides an alternative, discreet way for users to leave the page without needing to move the pointer or locate the control visually. It can be particularly helpful for keyboard users or in situations where using the mouse may draw attention.

Implementation

Add the global sticky container

Implement the global sticky container described in the Global page structure guide. This container hosts all bottom-sticky elements, including Quick exit and Cookie consent, ensuring consistent placement and predictable stacking.

Using the global sticky container:

  1. prevents conflicts with critical header content such as global alerts
  2. allows multiple sticky elements to stack correctly as block elements
  3. ensures body padding is applied so page content is not obscured.

Render the Quick exit HTML inside the sticky container

Render the Quick exit HTML directly in your CMS or page template inside the global sticky container.

This ensures:

  • the control is available to users without JavaScript
  • screen readers can announce the control and instructions reliably
  • the link functions as a standard navigation even if scripts fail.

Use CMS- or template-level logic to control when the component appears, for example only on pages where safety or privacy risk applies.

When JavaScript is available, the Quick exit script enhances the server-rendered element with cloak mode, double-Esc activation, and first-Tab focus behaviour. Without JavaScript, the link still functions as a standard navigation to the safe URL.

Include the screen-reader announcement message

Include the screen-reader-only announcement message in your Masthead template, immediately before the Skip Link container.

This ensures the message:

  • is available to screen-reader users (even when JavaScript is disabled)
  • is announced consistently and predictably
  • does not rely on client-side injection.

When JavaScript is enabled, the Quick exit script will also inject the same announcement message. This should be treated strictly as progressive enhancement, not the primary mechanism.

Do not add a separate "skip to Quick exit" link.

Load the NSW Design System JavaScript bundle

Load the NSW Design System JavaScript bundle to enable progressive enhancements, including:

  • Page cloaking on activation
  • Double-Esc keyboard support
  • First-Tab focus behaviour

The server-rendered Quick exit element must exist before the JavaScript runs.

Use programmatic initialisation only as a fallback

Use window.NSW.QuickExit.init() only if your CMS cannot render the Quick exit markup server-side.

This approach:

  • Requires JavaScript to be enabled
  • Makes the control unavailable to users without JavaScript
  • Should be treated as a last resort

Server-rendered HTML remains the preferred and recommended approach for accessibility and resilience.

Accessibility

Quick exit is designed to meet WCAG 2.2 AA when implemented and configured correctly. As a safety-critical component, it must remain accessible and functional in all supported environments, including when JavaScript is unavailable.

Keyboard access

  • The Quick exit control is included in the normal tab order
  • Keyboard users can reach and activate it using standard navigation keys
  • Focus styles are clearly visible and must not be removed or overridden
  • No additional skip link is required or recommended
  • If enabled, the optional double Esc key behaviour provides an alternative keyboard-triggered exit but must not replace the primary control.

Screen reader support

  • Semantic HTML and ARIA attributes ensure the control is announced with clear purpose
  • Instructional text explains both the on-screen action and the optional keyboard shortcut
  • A screen-reader-only announcement message provides additional context when the component is present
  • The announcement message should be rendered server-side where possible so it is available even when JavaScript is disabled.

JavaScript dependency

  • Quick exit must remain usable without JavaScript
  • Without JavaScript, the control functions as a standard link to the safe destination
  • With JavaScript enabled, progressive enhancements such as cloak mode, double-Esc activation and focus behaviour improve usability but are not required for access
  • Do not rely on JavaScript alone to render or activate the component.

Visual accessibility

Quick exit is designed with visual accessibility built in.

  • The component meets WCAG 2.2 AA colour contrast requirements
  • Supports zoom up to 400% without loss of content or functionality
  • Adapts to smaller viewports and high zoom by allowing text to wrap
  • Uses the global sticky container to ensure page content is not obscured.

Teams should avoid overriding styles or layout, as doing so may reduce visibility or make it harder to use in high-stress situations.

Assistive technology testing

Always test Quick exit with:

  • Keyboard-only navigation
  • Screen readers on supported platforms
  • JavaScript disabled or partially blocked.

This helps confirm the component behaves predictably and remains accessible in high-stress or constrained environments.

View in new windowView theming example

Quick exit

Leave quickly using this banner or press Esc 2 times. Exit now

Implementation within the sticky container