Use the Quick Exit component on pages where viewing the content could put a user's safety or privacy at risk, such as family and domestic violence information, sexual health services or other sensitive topics. The button gives people a fast, discreet way to leave the page without needing to scroll or search for navigation.
Place the Quick Exit control inside the global sticky container so it is consistently visible at the bottom of the viewport and behaves the same way across NSW Government websites.
Do:
Do not:
The Quick Exit component is designed for high stress situations where users need to leave a page quickly and confidently. The pattern focuses on three principles:
Treat the Quick Exit as a safety control, not a general navigation pattern. This helps maintain user trust and reduces confusion.
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.
This is because:
Render the Quick Exit link directly in your CMS or layout template so it is always present for users without JavaScript. Use CMS-level logic to control visibility on specific templates or when safety conditions apply.
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.
The preferred approach is to render this SR-only announcement message directly 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. The message should be added conditionally so that it only appears on templates where the Quick Exit component is present. When JavaScript is enabled, the Quick Exit script will also inject the same announcement message automatically, but this should be treated strictly as progressive enhancement rather than the primary method.
You still do not need to add a separate “skip to quick exit” link. For guidance on configuring Skip Links, see the Masthead component.
Load the NSW Design System JavaScript bundle to enable progressive enhancements such as cloak mode, double-Esc activation, and first-Tab focus behaviour. The server-rendered element must still exist for users without JavaScript.
Use window.NSW.QuickExit.init() only when your CMS cannot render the element server-side. This fallback approach requires JavaScript; users without JS will not see the Quick Exit control. Prefer server-rendered markup for full accessibility.
Why server-rendered HTML is preferred?
Placing the Quick Exit markup directly in the sticky container ensures the component works for users without JavaScript. The JavaScript layer is purely for enhancement and should not be relied on for basic visibility or functionality.
The label on the exit button (Exit now) is not customisable. This intentional design choice ensures consistent wording and recognisability across all NSW Government websites. Consistency helps users quickly identify the quick exit feature, particularly in stressful or time-sensitive situations where they may need to leave a page rapidly.
The quick exit button redirects users to neutral, non-sensitive sites such as google.com, nsw.gov.au or bom.gov.au. These destinations are chosen because they provide safe, trusted, and non-controversial landing pages that do not expose users to additional risks or sensitive content. Redirecting to these sites helps users quickly leave potentially harmful situations while maintaining their privacy and security.
When the Quick Exit is triggered with JavaScript enabled, the page is immediately concealed by applying display: none to the <html> element.
Without JavaScript, the manual link will still navigate to the safe destination, but no visual cloaking is applied.
The Quick Exit component includes an optional keyboard shortcut that allows users to trigger the exit using the Esc key twice in quick succession. This feature provides an alternative method for users who cannot or prefer not to use the mouse. When enabled (via enableEsc: true), the system listens for two consecutive Esc presses within a one-second window to activate the same exit behaviour as the main button.
This accessibility feature is particularly valuable for users who require keyboard navigation or need a discreet, rapid method to leave a page without drawing attention to their actions.
The Quick Exit control participates in the normal tab order and includes a clear focus style that meets WCAG 2.2 AA requirements. No skip link entry is required or recommended for this component. Keyboard users reach it naturally through standard tab navigation, with the SR-only announcement message providing additional context.
The Quick Exit control is responsive and designed to work with the sticky container at up to 400% zoom. At smaller breakpoints or high zoom, the component presents a compact layout so it does not obscure page content. Ensure the page template reserves space for the sticky container and that the control's label wraps when necessary to maintain readability.
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.
The Quick Exit component is fully accessible via keyboard navigation. Focus styles are clearly visible, and keyboard users can activate the button using standard keys to ensure ease of use for all users.
ARIA attributes and semantic HTML ensure the Quick Exit component is announced appropriately by screen readers, providing meaningful context and instructions for users who rely on assistive technologies.
Obstruction of content in the footer is automatically handled by the global sticky container. Padding equal to the height of the sticky container is applied to the <body> element to ensure that no page content is obscured by the Quick Exit control or other bottom-sticky elements.