Cookie Consent Banner Design

The live example above is plain HTML with Tailwind utility classes, so you can paste it into any Tailwind project. It uses type sizes text-sm (14px) and spacing p-5 (20px), mt-4 (16px), gap-2 (8px), px-4 (16px), py-2 (8px), constrained by max-w-xl. Everything sits on a 4px grid, which keeps rhythm consistent when you adapt it.

Colors use Tailwind's neutral stone scale so the pattern stays brand-agnostic. Swap stone-900 for your primary color on the main action, keep body text dark and check contrast after any change.

A visitor from Germany opens a SaaS blog post. A compact banner at the bottom explains in one sentence that the site uses cookies to keep it working and, with permission, to measure which articles are useful. Accept all and Reject all buttons have the same style and size, with a Choose link beside them.

He chooses Reject all. The banner disappears, no analytics scripts load, and the article is fully readable. A week later he decides to help the team and opens Cookie settings from the footer, where he enables analytics only. His choice is remembered across visits, and he is never asked again unless the categories change.

Content and media sites that rely on advertising often need detailed vendor lists and granular choices to meet regulations.

SaaS marketing sites usually only need analytics and marketing categories, so a simple banner with a preferences panel is enough.

Privacy-focused products may avoid non-essential cookies entirely and skip the banner, which can become a selling point.

Keep the banner compact: two short lines of text and buttons in one row on desktop, stacked on mobile. Give Accept and Reject the same size and style where regulations expect equal prominence. Use your normal surface color and typography so the banner feels part of the site, and keep it clear of important controls like chat widgets.

On mobile, banners easily cover half the screen. Keep the text to two short lines, place buttons side by side or stacked with equal size, and avoid fixed-height containers that clip content when text is enlarged.

Store the user's choice in a first-party cookie or local storage and gate analytics and marketing scripts on it. Make the banner a region with an accessible name, ensure it is reachable by keyboard, and only trap focus if it is a true modal. Many sites use a consent management platform to handle regional rules.

In a design system, the consent banner combines a surface, short text, buttons and a link, with a preferences dialog built from switches and descriptions. Define equal-weight button variants for Accept and Reject, and reuse your standard dialog component for the preferences layer so focus handling and keyboard behaviour are already solved.

Track consent rates per choice, but focus on compliance rather than maximizing acceptance. Check that scripts only fire after consent, and periodically audit which cookies are actually set.

Before shipping, run a short usability test with five or so people from your audience. Give them tasks rather than instructions and watch where they hesitate:

Be specific and honest: say what cookies are used for in plain language, such as measuring which pages are useful. Avoid euphemisms like 'to improve your experience' with no detail. Button labels should describe the outcome: 'Accept all', 'Reject all', 'Choose cookies'.

If you use an AI UI generator such as Inspo AI, these prompts are a good starting point for exploring variations of this pattern:

Consent banners are a special case of toast notifications and modal dialogs, and their buttons should follow your general error and form guidelines.