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

# Cookie Consent

> **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)

Cookie Consent aims to help you comply with privacy laws such as GDPR and CCPA. They require users 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 dependant behavior can be demonstrated. Some examples change their behavior also based on your browser viewport size.

`CookieConsentBasic.java`

```java
CookieConsent cookieConsent = new CookieConsent();
add(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.

`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);
```

## <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.

`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);
}
```

`CookieConsentTheming.java`

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

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

`79390985-6D82-4F30-A503-7166FC1E8C00`