> Markdown version of [Cookie Consent](https://vaadin.com/docs/v24/components/cookie-consent). Section index: [llms.txt](https://vaadin.com/docs/v24/components/llms.txt)

# Cookie Consent (deprecated since V24.9)

> **Note: Commercial Feature**
>
> A commercial Vaadin subscription is required to use Cookie Consent in your project.
>
> - [Start Free Trial](https://vaadin.com/trial)
>
> - [See Pricing](https://vaadin.com/pricing)

> **Warning: Cookie Consent will be removed in Vaadin 25.**
>
> Don’t start a new project using Cookie Consent. As an alternative, consider integrating a third-party library such as [cookieconsent](https://github.com/orestbida/cookieconsent).

<!-- vale Vaadin.Will = YES --><!-- vale Vaadin.Versions = YES -->

Cookie Consent aims to help you comply with privacy laws such as General Data Protection Regulation (GDPR) and California Consumer Privacy Act (CCPA). They require users to be informed and explicitly give consent to the usage of cookies.

> **Important: Scaled down examples**
>
> The examples on this page are scaled down so that their viewport-size-dependent behavior can be demonstrated. Some examples also change their behavior based on your browser viewport size.

**Lit** — `cookie-consent-basic.ts`

```html
<vaadin-cookie-consent></vaadin-cookie-consent>
```

**Flow** — `CookieConsentBasic.java`

```java
CookieConsent cookieConsent = new CookieConsent();
add(cookieConsent);
```

**React** — `cookie-consent-basic.tsx`

```tsx
<CookieConsent />
```

By default, the banner is shown at the top of the screen with a predefined text, a link to [cookiesandyou.com](https://www.cookiesandyou.com) which explains what cookies are, and a consent button.

## <a id="localization"></a>Localization

Cookie Consent is fully customizable. You can customize the message, the "Learn More" link, the "Dismiss" button, as well as the component’s position.

**Lit** — `cookie-consent-localization.ts`

```html
<vaadin-cookie-consent
  message="Tämä sivusto käyttää evästeitä parhaan kokemuksen tarjoamiseksi"
  dismiss="Selvä"
  learn-more="Lue lisää"
  learn-more-link="https://vaadin.com/terms-of-service"
></vaadin-cookie-consent>
```

**Flow** — `CookieConsentLocalization.java`

```java
CookieConsent cookieConsent = new CookieConsent();
cookieConsent.setMessage(
        "Tämä sivusto käyttää evästeitä parhaan kokemuksen tarjoamiseksi");
cookieConsent.setDismissLabel("Selvä");
cookieConsent.setLearnMoreLabel("Lue lisää");
cookieConsent.setLearnMoreLink("https://vaadin.com/terms-of-service");
add(cookieConsent);
```

**React** — `cookie-consent-localization.tsx`

```tsx
<CookieConsent
  message="Tämä sivusto käyttää evästeitä parhaan kokemuksen tarjoamiseksi"
  dismiss="Selvä"
  learnMore="Lue lisää"
  learnMoreLink="https://vaadin.com/terms-of-service"
/>
```

## <a id="positioning"></a>Positioning

Cookie Consent can be positioned in the viewport in 4 non-stretched positions, or stretched across the top or bottom:

|             |              |
| ----------- | ------------ |
| Top left    | Top right    |
| Bottom left | Bottom right |

|                        |
| ---------------------- |
| Top (stretch, default) |
| Bottom (stretch)       |

On smaller viewports, the component always takes up the entire width of the viewport.

## <a id="theming"></a>Theming

Cookie Consent’s theme is modified using CSS.

**Lit** — `cookie-consent-theming.ts`

```typescript
connectedCallback() {
  super.connectedCallback();
  document.documentElement.classList.add('cookie-consent-theming');
}
protected override render() {
  return html`<vaadin-cookie-consent></vaadin-cookie-consent>`;
}
```

`cookie-consent-theming.css`

```css
.cookie-consent-theming div.cc-window.cc-banner {
  background-color: var(--lumo-primary-color);
  box-shadow: var(--lumo-box-shadow-s);
  color: var(--lumo-primary-contrast-color);
  font-family: var(--lumo-font-family);
  font-size: var(--lumo-font-size-m);
}

.cookie-consent-theming a.cc-link {
  opacity: 1;
  padding: 0 var(--lumo-space-s);
}

.cookie-consent-theming a.cc-btn.cc-dismiss {
  background-color: var(--lumo-base-color);
  border-radius: var(--lumo-border-radius);
  color: var(--lumo-primary-text-color);
  font-size: var(--lumo-font-size-m);
  line-height: var(--lumo-size-m);
  min-width: 0;
  padding: 0 calc(var(--lumo-size-m) / 3 + var(--lumo-border-radius) / 2);
}
```

**Flow** — `CookieConsentTheming.java`

```java
UI.getCurrent().getElement().getClassList()
        .add("cookie-consent-theming");

CookieConsent cookieConsent = new CookieConsent();
add(cookieConsent);
```

**React** — `cookie-consent-theming.tsx`

```tsx
<CookieConsent />
```

`08024FA4-E49A-4B1C-AB3E-B7053C8D3322`