Cookie Consent Dialog Block for React

So you can see it without a click. On load the card is a copy drawn in place at the foot of the page: a native dialog element that isn't modal, with no scrim, so nothing is trapped, hidden or focused, and the page around it keeps working. The Cookie choices button in the header opens the real card as a Popover, and the copy stays closed until a reload. Both show the same ConsentButtons component and share the block's state. In your app keep a card of your own fixed to the foot of the page, non-modal, with these two buttons, and drop the copy: the "in-place" state and the dialog element inside the frame.

Because a consent that is easier to give than to refuse isn't a free choice. Both are outline buttons of the same size, side by side, with Reject all first, and the card has nothing to scroll past. If your law or your policy asks for a way to set categories one by one, add a third control that opens a preference centre: that is the Cookie Settings dialog in this category. Link your cookie policy from the last sentence; the demo has no policy page to link.

Here it sets the choice in local state, hides the card, writes it on the drawn page's foot and says in a polite status message that nothing was stored. No cookie is set. In your app write the choice to your consent store in choose, set or clear the optional cookies and scripts from it, and show the card again whenever there is no stored choice or the policy changes.

Because a modal would trap focus and hide the page, which is what this card promises not to do, and a Popover is the one overlay in all four libraries that isn't modal. It is a Popover, which is not modal in this library, anchored to the button. Closing it without a choice leaves the choice unmade. In your app the card is a fixed non-modal panel at the foot of the page, which is what the copy shown on load draws.

Yes. The real card is named by its title and described by its two sentences, focus moves into it when it opens (onto Reject all), and Escape closes it and returns focus to the Cookie choices button; Tab can leave it, since it isn't modal. Both answers are real buttons with their names. The copy shown on load moves no focus; Escape inside it closes it and puts focus on the button, and choosing either answer does the same.

The copy shown on load spans the page's width at its foot, above the line that states the choice, with the two buttons splitting the row. The real card is a Popover under the button, as wide as the screen allows.