Cookie Consent Banner
Cookie 同意条
Aliases:Cookie 同意条Cookie 提示条cookie 小横幅隐私同意条追踪同意弹条cookie bannercookie consentconsent banner
What is it
A banner or overlay that asks consent before setting non-essential cookies — a compliance gate, not a system alert. Offer accept, reject or granular choices and remember the decision; tracking cookies must not fire before an answer. Docked at the bottom or centered on first visit, never covering the primary task.
Name disambiguation
Easily confused with Alert. An Alert is a system message for status and errors; a cookie consent banner is a legal gate that must be answered before non-essential cookies are set — a dismiss-only "Got it" does not count as consent.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- The site sets non-essential cookies — analytics, ads, personalization
- Audiences under GDPR / ePrivacy-style consent rules
- Consent must be recorded and revocable
✕ When not to use
- Strictly necessary cookies only — do not interrupt
- Reusing it as a generic announcement bar — wrong semantics and legal weight
- Making reject harder to find than accept — dark patterns backfire
Variants
Minimal notice
最简告知
One line plus Accept / Reject — most restrained
Granular choices
颗粒度选择
Per-category toggles (necessary / analytics / marketing); necessary stays locked
Wall-style
墙式
No continue without consent — controversial, use sparingly
Implementation
positiontransitionaria-liveformDo not load non-essential scripts before consent; persist the choice (cookie or localStorage) and allow withdrawal from settings. Dock the banner with position: fixed and switch to a full-width card on mobile; keep Reject as discoverable as Accept. Scale enter transitions by var(--demo-speed, 1) and respect prefers-reduced-motion.
Related concepts
An inline, status-coloured banner inside the page flow for messages that must be seen: errors, warnings, important notices. It takes layout space instead of overlaying, and stays until the issue is resolved or the user dismisses it.
ComponentsAlternativeA small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsSimilarChecks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
PatternsUsed with