Help users toStop a service timing out

Also known as: modal window

Creating focus on a single interaction.

An example of a modal window warning the service will time out

When to use this pattern

Modals should be avoided in most cases. They are hard to make accessible and do not work well in mobile views.

Adding content to a new page instead of showing it in a modal should be the default approach.

Modals can be useful when you need to draw a user's attention to something, for example timeout warnings. Please discuss with the wider community or email before using this pattern.

How it works

If the modal is user-triggered, the content that opens the modal window (for example, a link or button) should explain to the user what will happen.

A modal should:

  • focus on a single task
  • include a heading
  • be accessible

Services using this pattern

  • Employer checking service
  • Passport renewals


More research is needed. If your service uses this pattern, get in touch to share your user research findings.


When a time limit, like a session timeout, is set ensure a user is informed, especially if this may result in a loss of data. See the timeouts guidance for more information.

If your service uses this pattern, let us know of any insights you have on accessibility considerations.

Get in touch

If you’ve got a question or suggestion share it on the Slack channel #ho-design-system, on GitHub or email