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 {
  CookieBanner,
  CookieBannerClose,
  CookieBannerPreferencesToggle,
  CookieBannerPreferencesDisplay,
  CookieBannerDescription,
  CookieBannerFooter,
  CookieBannerHeader,
  CookieBannerPreferences,
  CookieBannerTitle,
} from "@govtechmy/myds-react/cookie-banner";

export default () => (
  <CookieBanner>
    <CookieBannerHeader>
      <CookieBannerTitle />
      <CookieBannerDescription />
    </CookieBannerHeader>
    <CookieBannerPreferences />
    <CookieBannerFooter>
      <CookieBannerPreferencesToggle>
       <CookieBannerPreferencesDisplay>
         <CookieBannerClose />
       </CookieBannerPreferencesDisplay>
      </CookieBannerPreferencesToggle>
    </CookieBannerFooter>
  </CookieBanner>
);

Props

CookieBanner

Houses all the constituent components of the cookie banners. The component is a controlled component. It is being built on Dialog.Root and DialogBody.

Prop	Type	Default
`open`	`boolean`	`false`
`dismissible`	`boolean`	`true`
`onDismiss`	`() => void`	-
`onOpenChange`	`(open: boolean) => void`	-

CookieBannerHeader

Contains the CookieBannerTitle and CookieBannerClose components. It is being built on DialogHeader.

CookieBannerTitle

To customise the title of the cookie banner. It is being built on DialogTitle.

CookieBannerClose

To change the open state of the Cookie Banner. It is being built on DialogClose.

CookieBannerPreferences

A container component that wraps cookie preference options, typically containing checkboxes and descriptions for different cookie categories.

CookieBannerFooter

Contains action elements like buttons and the customiser for cookie preferences.

CookieBannerPreferencesToggle

A button component that toggles the visibility of cookie preference options. By default, renders as a Button component but can be customized using asChild props.

CookieBannerPreferencesDisplay

A wrapper that shows or hide depends on the value of the showPreferences state of the CookiesBanner. If the showWhen props is preferences-hidden, the wrapper will not be shown when showPreferences props is falsy. By default, renders as a div component but can be customized using asChild props.

Prop	Type	Default
`showWhen`	`enum`	`preferences-hidden`

CookieBannerDescription

Contains the description of the cookies banner. It is being build on DialogDescription.

MYDS