Skip to content
Compositions

CookieBanner

Cookie consent banner: a title and description beside a stack of actions. Lays itself out from its own width (a container query), stacking the copy above the buttons when narrow and setting them side by side when wide.

We use cookies

Cookies help us give you the best experience on our website. Our cookie policy explains how we use them.

By selecting “Accept”, you agree to our use of cookies.

Usage

import { CookieBanner, CookieBannerProps } from "@instruments/materia-ui/compositions/cookie-banner";

Best practices

  • The app places and sizes it (e.g. fixed inset-x-4 bottom-4 max-w-3xl); it has no intrinsic width, so a fixed corner without a width collapses it.

  • Only wire the actions you support: Reject and Cookie settings render only when onReject / onSettings are passed.

  • It records nothing. Store the visitor's choice in the handlers and stop rendering the banner once they have made it.

Props

PropTypeDefaultDescription
acceptLabelstring | undefined"Accept"

Accept button label.

descriptionReact.ReactNodeTwo paragraphs: what cookies are for, then what accepting means.

Supporting copy under the title. Pass your own to link to a cookie policy.

onAccept(required)() => void

Called when the visitor accepts cookies.

onReject(() => void) | undefined

Called when the visitor rejects cookies. Omit to render no Reject button.

onSettings(() => void) | undefined

Called when the visitor opens cookie settings. Omit to render no settings button.

rejectLabelstring | undefined"Reject"

Reject button label.

settingsLabelstring | undefined"Cookie settings"

Settings button label.

titleReact.ReactNode"We use cookies"

Banner heading; also the section's accessible name.

Also exports

  • interfaceCookieBannerProps

Composition

Builds on

Button, Flex, Heading, Text