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.

Usage

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

export default () => (
  <CookieBanner>
    <CookieBannerHeader>
      <CookieBannerTitle />
      <CookieBannerClose />
    </CookieBannerHeader>
    <CookieBannerDescription />
    <CookieBannerPreferences />
    <CookieBannerFooter>
      <CookieBannerCustomiser />
    </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 and DialogContent.

Prop	Type	Default
`open`	`boolean`	`false`

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.

Prop	Type	Default
`asChild`	`boolean`	`false`

CookieBannerClose

To change the open state of the Cookie Banner.

Prop	Type	Default
`onClick`	`function`	-

CookieBannerPreferences

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

Prop	Type	Default
`asChild`	`boolean`	`false`

CookieBannerFooter

Contains action elements like buttons and the customiser for cookie preferences. Built on top of DialogFooter to provides a consistent layout for cookie banner actions.

Prop	Type	Default
`fillWidth`	`boolean`	`false`

CookieBannerCustomiser

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.

Prop	Type	Default
`asChild`	`boolean`	`false`

MYDS