Cookie Consent Banner

The CookieConsentBanner presents a banner to the user to accept or reject cookies.

Polymorphic Component

By default, content is rendered inside a <div>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Basic Cookie Consent Banner

The onAccept prop is fired when the user accepts the cookie consent. Consumers should use this to store state to prevent rendering the banner again. The close button will hide the banner, but will not fire the onAccept prop.

import { CookieConsentBanner } from '@curology/ui-components-web/react/CookieConsentBanner';
import { Link } from '@curology/ui-components-web/react/Link';

<CookieConsentBanner onAccept={() => alert('accept')}>
  To personalize your experience, we use cookies (including those from
  third-party tools) on our site. By continuing to browse our site, you
  agree to the use of these cookies.{' '}
  <span className="cur-whitespace-nowrap xl:cur-block">
    Or you can opt out <Link href="/">here</Link>.
  </span>
</CookieConsentBanner>

Props

CookieConsentBannerProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
onAccept	MouseEventHandler<HTMLButtonElement>		No	Callback run when the "OK" or "X" buttons are clicked.