Cookie banner

Standard

Default

A default cookie banner asks users to accept or reject non-essential cookies.

Cookies on this government service

We use analytics cookies to help understand how users use our service.

View cookie preferences

Show code

<div
  class="govuk-cookie-banner"
  data-nosnippet
  role="region"
  aria-label="Cookie banner"
>
  <div class="govuk-cookie-banner__message govuk-width-container">
    <h2 class="govuk-cookie-banner__heading govuk-heading-m">
      Cookies on this government service
    </h2>
    <div class="govuk-cookie-banner__content">
      <p class="govuk-body">
        We use analytics cookies to help understand how users use our service.
      </p>
    </div>
    <div class="govuk-button-group">
      <button class="govuk-button" data-module="govuk-button">
        Accept analytics cookies
      </button>
      <button class="govuk-button" data-module="govuk-button">
        Reject analytics cookies
      </button>
      <a class="govuk-link" href="/cookie-preferences">View cookie preferences</a>
    </div>
  </div>
</div>

---
import { CookieBanner, CookieBannerMessage, CookieBannerHeading, CookieBannerContent, CookieBannerActions, Button } from "@i-dot-ai-npm/component-library-astro";
---

<CookieBanner>
  <CookieBannerMessage>
    <CookieBannerHeading>
      Cookies on this government service
    </CookieBannerHeading>
    <CookieBannerContent>
      <p class="govuk-body">
        We use analytics cookies to help understand how users use our service.
      </p>
    </CookieBannerContent>
    <CookieBannerActions>
      <Button variant="primary">Accept analytics cookies</Button>
      <Button variant="primary">Reject analytics cookies</Button>
      <a class="govuk-link" href="/cookie-preferences">View cookie preferences</a>
    </CookieBannerActions>
  </CookieBannerMessage>
</CookieBanner>

import { CookieBanner, CookieBannerMessage, CookieBannerHeading, CookieBannerContent, CookieBannerActions, Button } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <CookieBanner>
      <CookieBannerMessage>
        <CookieBannerHeading>
          Cookies on this government service
        </CookieBannerHeading>
        <CookieBannerContent>
          <p className="govuk-body">
            We use analytics cookies to help understand how users use our service.
          </p>
        </CookieBannerContent>
        <CookieBannerActions>
          <Button variant="primary">Accept analytics cookies</Button>
          <Button variant="primary">Reject analytics cookies</Button>
          <a className="govuk-link" href="/cookie-preferences">View cookie preferences</a>
        </CookieBannerActions>
      </CookieBannerMessage>
    </CookieBanner>
  );
}

<script>
  import { CookieBanner, CookieBannerMessage, CookieBannerHeading, CookieBannerContent, CookieBannerActions, Button } from "@i-dot-ai-npm/component-library-svelte";
</script>

<CookieBanner>
  <CookieBannerMessage>
    <CookieBannerHeading>
      Cookies on this government service
    </CookieBannerHeading>
    <CookieBannerContent>
      <p class="govuk-body">
        We use analytics cookies to help understand how users use our service.
      </p>
    </CookieBannerContent>
    <CookieBannerActions>
      <Button variant="primary">Accept analytics cookies</Button>
      <Button variant="primary">Reject analytics cookies</Button>
      <a class="govuk-link" href="/cookie-preferences">View cookie preferences</a>
    </CookieBannerActions>
  </CookieBannerMessage>
</CookieBanner>

import { CookieBanner, CookieBannerMessage, CookieBannerHeading, CookieBannerContent, CookieBannerActions, Button } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <CookieBanner>
      <CookieBannerMessage>
        <CookieBannerHeading>
          Cookies on this government service
        </CookieBannerHeading>
        <CookieBannerContent>
          <p class="govuk-body">
            We use analytics cookies to help understand how users use our service.
          </p>
        </CookieBannerContent>
        <CookieBannerActions>
          <Button variant="primary">Accept analytics cookies</Button>
          <Button variant="primary">Reject analytics cookies</Button>
          <a class="govuk-link" href="/cookie-preferences">View cookie preferences</a>
        </CookieBannerActions>
      </CookieBannerMessage>
    </CookieBanner>
  );
}

When to use this component

Use this component if your service sets any cookies on a user’s device.

Remember, you must:

• tell users about the cookies your service sets on their device
• let users accept or reject any cookies that are not essential to providing your service

The term ‘non-essential cookies’ includes:

• HTML5 local storage
• service workers
• any other technologies that store files on the user’s device

This cookie banner and the Cookies page pattern are based on the approach to getting cookie consent used on the GOV.UK website.

This component page shows several options for using a cookie banner, based on the types of cookies you’re using in the service. We also tell you what to cover in your cookie banner, with some text examples.

Before you start

Audit and categorise your cookies as shown in the cookies page pattern to help you choose the best option for your service.

You must not take the information on this page as legal advice. Your organisation is responsible and accountable for what they do to comply with data protection legislation, such as:

• Privacy and Electronic Communications Regulations (PECR)
• General Data Protection Regulation (GDPR)

Check with your organisation's privacy expert to see how data protection legislation affects your website and service.