Skip to main content

Cookie Banner

Cookie banner allows users to accept or reject cookies which are not essential to making your service work.

Overview

The purpose of the cookie banner is to inform users about the use of cookies, obtain their consent, and customise their preferences.

It aids websites in complying with privacy regulations by offering transparency regarding data collection practices and empowering users to control their privacy settings.

A group of tags.

Anatomy

Anatomy of the Banner.
Anatomy of the Modal.
  1. Banner: Contains the content.
  2. Title: Provides context to the Banner.
  3. Body copy: Provides supporting context to the user.
  4. Call to actions: Allow the user to proceed with multiple options.
  5. Modal: A closeable window that overlays a page.
  6. Content: Provides information for the user about the cookie preference options available.
  7. “Save” button: Allows the user to save their preferences and continue with their flow.
  8. Scrim: Screen overlay that obscures the on-page content.

Variations

Cookie banner with copy about cookies and buttons to accept or manage preferences.
Modal with options to authorise cookies.

Modifiers

Default

Default cookie banner, with Accept All as primary action only.

Primary actions only

This version is used when legal compliance in the country requires you to do so. In countries that do not require this, the default variation is used.

Cookie banner, with Accept All and Necessary Only as primary actions.

Interaction area

Banner with highlights on the areas of interaction: links and buttons.
Modal with highlights on the areas of interaction: links and buttons.
  • Redirect: Redirects the user to the page they have selected in a new tab, the cookie banner will continue to show until the user makes a selection.
  • Confirm selection: Saves the user's selection and closes the modal and cookie banner.
  • Opens a “Manage preferences” modal: A modal will open to allow the user to manage their preferences.
  • Toggle on/off: Allows the user to toggle selections on or off.
  • Back button: Closes the modal and shows the cookie banner again.

Content

Behaviours

Background

The background page of the cookie banner isn’t disabled, and is only disabled once the modal is opened. The “Select your country” popover from the top navigation should sit on top of the banner so that the users can change the locale.

Banner positioned at the bottom with the “Select your country” popover on top of the banner.

The background page is disabled when the modal is opened until the user has made a selection and is ready to continue with their flow, or returns to the banner. A scrim is applied and the banner disappears.

Cookie modal that positioned in the middle of the screen, on top of a dark overlay.

Turn all on / off

Once the overarching toggle is toggled on/off, the child toggles follow suit. The overarching toggle will not be toggled on unless all child toggles are selected.

Modal showing the toggles states when

Positioning

The cookie banner is always positioned at the bottom of the screen with default bottom, left and right padding of 16px from the container of the banner.

Image of a frame with the banner positioned at the bottom.

The modal is positioned in the centre of the screen with a scrim applied.

Image of a frame with the modal positioned in the middle of the screen.

Responsive design

Narrow

At the narrow breakpoints, the banner has a maximum height of 432px, and the modal is set to full screen. If the content overflows due to a change in language, the available height, the call to action buttons and header become sticky and the body content scrolls.

Responsive banner as it looks on mobile views showcasing a scroll bar for the content.
Responsive modal as it looks on mobile views showcasing a scroll bar for the options and content.

Motion

All motion details for the cookie banner can be found here, it also defines how the motion between the banner and modal overlap.

Right-to-left languages

For languages that read right-to-left, the layout and alignment of the content is reorganised so the readability of the component makes logical sense.

Wide

Banner displaying right-to-left content.
Modal displaying right-to-left content.

Narrow

Responsive banner displaying right-to-left content.
Responsive modal displaying right-to-left content.

Resources

Figma Component
 Stable
Figma Documentation
 Stable
Web Components
 Stable
Vue [Fozzie]
 N/A
React [Snacks]
 N/A
iOS JustUI [UI Kit]
 N/A
iOS PIE [SwiftUI]
 N/A
Android PIE [Compose & Views]
 N/A