Cookie Banner

Inform users about cookie usage on a website

npm run add CookieBanner

Use the CookieBanner component to inform users about cookie usage on a website and collect their consent in compliance with privacy regulations like GDPR and CCPA.

<CookieBanner
    heading="Our site uses cookies"
    showIcon={true}
    acceptButton={{
        text: 'Accept',
        theme: 'flat'
    }}
    declineButton={{
        text: 'Decline',
        theme: 'flat'
    }}
>
    <span class="muted">
        We use cookies...
    </span>
</CookieBanner>

You can create the CookieBanner component with an optional heading and cookie icon. Omit the showIcon prop to hide the cookie icon. Inside the component, you can pass any element to create the body of the cookie banner. For the accept and decline buttons, you can pass an object with ButtonProps, along with a text and icon prop to set the text and button icon:

<CookieBanner
    heading="Our site uses cookies"
    showIcon={true}
    acceptButton={{
        text: 'Accept',
        theme: 'success',
        icon: 'circle-check'
    }}
    declineButton={{
        text: 'Decline',
        theme: 'alert',
        icon: 'circle-close'
    }}
>
...
</CookieBanner>

For Astro components, you can use an icon type. Please see the documentation of the Icon component for available icon types. For Svelte and React components, you can import an SVG string and pass that to the icon prop.

Position

By default, the CookieBanner is displayed in the bottom right corner of the page in a fixed position. This behavior can be changed using the position prop:

<CookieBanner
    ...
    position="left"
>
...
</CookieBanner>

<CookieBanner
    ...
    position="bottom"
>
...
</CookieBanner>

The position prop can be set to:

• left: Displays the CookieBanner component in the bottom left corner.
• bottom: Displays the CookieBanner component on the bottom of the page with a 100% width.

Variants

The CookieBanner component can be be used with any valid CardProps type, meaning you can customize its appearance similar to any regular card:

<CookieBanner
    ...
    secondary={true}
>
...
</CookieBanner>

<CookieBanner
    ...
    compact={true}
    bodyClassName="cookie-banner-body grid sm"
>
...
</CookieBanner>

<style is:global>
    .cookie-banner-body {
        padding: 20px;
    }
</style>

Behavior

The CookieBanner component also comes with a functionality that hides the banner when a button is clicked and sets a cookie called cookieBannerResponse that you can use in your application. It’s value will be either true or false, depending on whether the user clicks “Decline” or “Accept”.

The CookieBanner component is only shown again if this cookie expires, or if the user hasn’t interacted with the cookie banner. You can change this behavior and rename the cookie in the Astro component file. Search for the following value in the component files to replace it:

cookieBannerResponse

API

type CookieBannerProps = {
    heading?: string
    showIcon?: boolean
    position?: 'left' | 'bottom'
    className?: string
    acceptButton: ({
        text: string
        icon?: string
    } & ButtonProps)
    declineButton: ({
        text: string
        icon?: string
    } & ButtonProps)
} & CardProps