UI components · Overlays
Cookie Consent
Also called: Cookie banner, Consent banner, GDPR banner, Cookie notice
A notice pinned to the bottom (or a corner) of the screen when someone first opens a site. It says which cookies the site uses and lets visitors choose "Accept," "Reject," or "Preferences."
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstAdd a cookie consent notice to the site. On the first visit, show a white card centered at the bottom of the screen, max width 720px (position: fixed, 24px from the bottom, 16px corner radius, with a shadow). On the left, 14px text that only describes the cookies the site really uses and what they're for (I'll provide the list), followed by a "Cookie policy" link. On the right, three buttons of the same size: "Reject," "Preferences," and "Accept all," with Reject just as prominent as Accept. "Preferences" opens a dialog with switches for three categories: "Necessary (always on) / Analytics / Advertising." Save the choice to localStorage so the notice doesn't show again, and add a "Cookie settings" link in the footer so visitors can change it anytime. Don't load analytics or advertising scripts until the visitor agrees. Give the container role="region" and aria-label="Cookie consent". On mobile, pin it full width to the bottom and keep it under a quarter of the screen height.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Cookie Consent is what you need.
Use Cookie Consent when
- Marketing sites and online stores that serve visitors from regions with cookie consent rules, like the EU and the UK
- Sites that use analytics, advertising, or other third-party tracking scripts and need visitors' consent first
- When visitors need to be able to change their cookie choices anytime (with a "Cookie settings" link in the footer)
Pick something else when
Sites that only use necessary cookies like login and cart, in regions where the law doesn't require consent. No need to show it (check with your legal advisor).
Maintenance notices and new feature reminders
Buttons that finish the current page's task (Save, Checkout)
Use insteadBottom Action Bar
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Only one big "Accept" button, with "Reject" hidden in settings or shown as faint small text
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
A notice so tall it covers half the phone screen and the page's buy button
- 03
Analytics and advertising scripts already loading before the visitor has agreed
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A notice bar (or small card) fixed to the bottom or a corner of the screen, with a sentence or two of explanation, a cookie policy link, and "Accept / Reject / Preferences" buttons. Preferences usually opens a dialog with a switch per category.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A cookie consent notice is a common overlay on sites that serve visitors in the EU, the UK, and similar regions. It's a full-width bar at the bottom of the screen or a small card in the bottom-left corner, with a sentence or two about what the site uses cookies for, a "Cookie policy" link, and buttons like "Accept all," "Reject," and "Preferences." Clicking "Preferences" opens a dialog where each category (necessary, analytics, advertising) can be switched on or off. Once visitors choose, the choice is remembered and the notice doesn't come back.
It also sits at the bottom of the screen, but it's not a Bottom Action Bar. The action bar holds the buttons that finish the current task (Save, Place order) and stays there. A cookie notice has nothing to do with the page's task. It's a one-time, site-wide request for consent that disappears after the visitor chooses. It's not an Announcement Banner either. That one announces maintenance or promotions, while a cookie notice needs the visitor to make an explicit choice. The preferences step uses a Modal.
"Reject" must be as easy to click as "Accept." Don't bury it in a second layer or make it a faint text link. Don't load analytics or advertising scripts before the visitor agrees. Only describe cookies the site actually uses, and don't write unverified compliance claims like "GDPR certified." It's a fixed overlay that covers the bottom of the page, so keep it short on phones and don't let it hide the bottom action bar or main buttons. Whether you need this notice and which laws apply is a question for your legal advisor.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-cookie-consent- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
#onetrust-banner-sdk#onetrust-consent-sdk#CybotCookiebotDialog.cc-window.cc-banner#cookie-law-info-bar.cky-consent-container.cmplz-cookiebanner#usercentrics-root.qc-cmp2-container.osano-cm-window#truste-consent-track:is(div, section, aside, dialog, form)[class*="cookie" i]:has(button, a[href], [role="button"]):not([class*="cookie" i] *, main *, article *):is(div, section, aside, dialog, form)[id*="cookie" i]:has(button, a[href], [role="button"]):not([id*="cookie" i] *, main *, article *):is(div, section, aside, dialog)[class*="consent" i]:has(button):not([class*="consent" i] *, form *, main *, article *):is(div, section, aside, dialog, [role="dialog"], [role="region"]):is([aria-label*="cookie" i], [aria-labelledby*="cookie" i], [aria-describedby*="cookie" i], [aria-label*="consent" i])
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
cookie-consentcookie-bannercookie-noticecookie-barcookie-popupcookiescookieconsent-bannerconsent-barconsent-popupgdpr
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
CookieConsentCookieBannerCookieNoticeCookieBarConsentBannerCookiePopupGdprBanner
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
fixed bottomoverlay
- Priority
- 5 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026