CookieBanner

What it does

Shows on the first visit and stays until the visitor chooses. Under GDPR it offers Accept All, Reject All and Customise; under CCPA it offers Do Not Sell. After a choice it disappears and does not come back in that browser. Its close button hides it for this page view without saving anything; it returns on the next page load, and the recall button appears meanwhile. It shows and hides itself; you only render it.

You already render it if you followed Installation. Try it in the Playground.

<CookieBanner />

Change what it shows

Nothing on the banner is set through props. Everything comes from initCookieYes(), so the banner, the dialogs and the recall button always match.

Restyle it

It accepts className and style like any element; they are added to the banner's own styling, not replacing it. For one part of the banner, use its data-cy-part in your CSS:

[data-cy-part="banner"] {
  max-width: 32rem;
}

[data-cy-part="accept-all"] {
  font-weight: 600;
}

The parts are banner, title, description, actions, accept-all, reject-all, customise, do-not-sell, close and branding. For your own markup, not only your own styles, use the Banner primitives.

Under CCPA

Do Not Sell opens the opt-out dialog, so render it next to the banner:

<CookieBanner />
<CookieOptOut />

Common mistakes

The banner never appears. You already chose in this browser. Delete the cookieyes-consent cookie and reload.

The banner is unstyled text. The stylesheet import is missing. See Installation.

Do Not Sell does nothing. <CookieOptOut /> is not rendered.

Next steps

• CookiePreferences: the dialog Customise opens
• RecallButton: lets a visitor change their choice later
• Banner primitives: the same behaviour with your own markup