Cookie Consent Notification Block for React

No. Choosing only changes the card and the line it writes ("You chose: essential and analytics. Nothing was stored in this demo."), so a reload asks again. In your app, write the choice (and the date and the version of your policy it applies to) in a first-party cookie or in your own storage, and set only the cookies of the kinds that are on.

So the easy answer isn't the one you want people to give: they have the same size, variant, row and order of weight, Reject first. Both are Shine Buttons with the outline variant, so the light that sweeps across on hover is the same too. There is no filled button on the card at all.

The trigger is a real button with aria-expanded; the kinds sit in a list inside a Collapsible, unseen and out of the tab order while it is closed. Each optional kind has a switch named "Analytics cookies" and so on, and its cookies in mono under it (_oc_ab, _oc_reach); Essential is shown "On" with no switch, since refusing it would break the page. The switches change a draft; Save choices keeps it, and Reject all and Accept all keep their own answers whatever the switches say.

After any choice the card becomes one line, "You chose: essential and analytics." or "essential only" or "all cookies", and focus moves to Change. Change, or Privacy choices in the page's footer, reopens the card with the switches as you left them and focus on Customize. The block says "The cookie card is already open" if you press the footer link while it is.

dialog-cookie-consent is the two-button question in a non-modal popover from the page header; this is the corner card with the granular choice inline, the cookie names, the receipt and the footer link, with no dialog and no header trigger. Pick this one when you want the choice to live on the page.

The card is a named section, not a modal: the page stays readable and usable beside it and nothing takes focus on load. Every control is a real button or switch with a name, the switches' labels are written out, and one polite status line says what each press did. On a phone the explanatory line under each kind is kept for screen readers and the cookie names stay visible, so the card fits the stage.