Cookie Consent Multi-Action Banner Block for React

It is not a dialog: it is a section named by its heading, in the flow of the page, and it never traps focus. To pin it, put fixed inset-x-4 bottom-4 z-50 on the card's outer element (the one with max-w-2xl) and remove the py-8 md:py-12 padding on the wrapper above it; add pb-[env(safe-area-inset-bottom)] where phones have a home bar. Pinned or not, people can tab past it and keep reading.

Accept all and Reject non-essential are the same size and width and sit next to each other, and Reject is one press like Accept. The difference is colour: Accept is the Shine Button. If your regulator reads colour as weight, make both outline buttons and drop the Shine Button, so neither choice stands out.

It is a link, not a button, because it leaves the prompt: point its href at your preferences page, or at the granular consent card (banner-multi-action-consent-granular) on a page of its own. It doesn't fold the prompt, so a visitor who changes their mind still has the choices in front of them when they come back.

Nowhere in this block: it forgets on purpose so the preview always shows it. In the two handlers, acceptAll and reject, write a first-party cookie such as boltstead-cookies=all or necessary, notify your tag manager, and have the server skip the card when the cookie exists. Reading storage after the first paint would show the card and then fold it away, moving the page.

The buttons can't keep focus once the card is folded and inert, so focus moves to a visually hidden line at the same spot that says "Cookie preferences saved: all cookies allowed." or "…only necessary cookies allowed.", which screen readers read. The next Tab carries on from there.

The two parts stack under a rule: the text first, then the three buttons at full width, one per row. At 320 pixels nothing scrolls sideways, and in a right-to-left layout the divider and the order of the parts mirror.