ConsentBar

Frames · src/components/ConsentBar/ConsentBar.tsx

Asks about cookies, and takes no for an answer.

Decline is FIRST and is a real button, the same size and weight as accepting. The common pattern - a bright "Accept all" beside a grey link in the small print - is a dark pattern, and this component is arranged so that version cannot be built with it.

Required categories render as required with a label saying so, rather than as a checked box a person cannot move and is not told why.

role="dialog" with the explanation wired through aria-describedby, so a screen reader is told what it is being asked before it reaches the buttons.

Import

import { ConsentBar } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
title	string
categories	ConsentCategory[]
declineLabel	React.ReactNode
chooseLabel	React.ReactNode
saveLabel	React.ReactNode
acceptLabel	React.ReactNode
requiredLabel	React.ReactNode
className	string
children	React.ReactNode
onDecide	(choice: Record<string, boolean>) => void	Receives the decision as { [categoryId]: boolean }.

Exported types

ConsentCategory