Cookies Banner

Notifies users that the website uses cookies to improve their experience and gives them the option to manage their consent preferences through cookie settings. It typically appears when a user lands on the website for the first time.

Source Storybook

Usage

Import

import {
  CookieBanner,
  CookieBannerClose,
  CookieBannerDescription,
  CookieBannerAction,
  CookieBannerPreferences,
  CookieBannerTitle,
  CookieBannerPreferencesTrigger,
} from "@govtechmy/myds-react/cookie-banner";

Anatomy

export default () => (
  <CookieBanner>
    <CookieBannerTitle />
    <CookieBannerDescription />
    <CookieBannerPreferences />
    <CookieBannerAction>
      <CookieBannerClose />
    </CookieBannerAction>
  </CookieBanner>
);

Examples

Uncontrolled vs Controlled State

Cookie Banner can be handled as a controlled or uncontrolled component.

To use as an uncontrolled component, define the defaultOpen prop as initial state.
To use as a controlled component, replace with the open and onOpenChange props.

Below is an example of a controlled Cookie Banner.

Note

We recommend to keep CookieBanner as an uncontrolled component (via defaultOpen). You may use client-side storage APIs such as localStorage or sessionStorage to store the state, and retrieve it when the user visits the website again.

Preference Call-to-Action (CTA)

CookieBannerAction is responsible for displaying the call-to-action (CTAs) for the cookie banner. However, when allowing user to choose their cookie preferences, you may want to present a different CTAs. With CookieBannerAction, simply pass the preferences prop to display the preference CTAs.

Note

Use CookieBannerPreferencesTrigger to toggle the visibility of cookie preference options!

Props

CookieBanner

Prop	Type	Default
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	`false`
`onOpenChange`	`(value: boolean) => void`	-

CookieBannerTitle

Prop	Type	Default
`children`	`ReactNode`	-

CookieBannerDescription

Prop	Type	Default
`children`	`ReactNode`	-

CookieBannerPreferences

Prop	Type	Default
`children`	`ReactNode`	-

CookieBannerPreferencesTrigger

Prop	Type	Default
`asChild`	`boolean`	-
`children`	`ReactNode`	-

CookieBannerAction

Prop	Type	Default
`preferences`	`boolean`	-
`children`	`ReactNode`	-

CookieBannerClose

Prop	Type	Default
`asChild`	`boolean`	-
`children`	`ReactNode`	-

MYDS