Cookie Banner
ProA GDPR-compliant cookie consent banner displayed at the bottom of the viewport. Presents a clear explanation of cookie usage alongside Accept and Reject buttons, with an optional link to the full cookie policy. Does not block underlying page content.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | ||
| Compact |
Usage Guidelines
Do
Provide equally prominent Accept and Reject buttons — no dark patterns.
Don't
Pre-check non-essential cookie categories — that violates GDPR.
Do
Link to the full cookie or privacy policy.
Don't
Make Reject harder to find or visually de-emphasised compared to Accept.
Do
Persist the user's choice and do not re-prompt on every visit.
Don't
Block page interaction until the user responds — the banner should be non-modal.
Do
Keep the banner at the bottom so it does not obscure main content.
Don't
Code
Design Tokens
Accessibility
- Uses role="region" with aria-label="Cookie consent" so screen readers can identify it.
- Accept and Reject buttons are keyboard accessible and equally reachable via Tab.
- Banner does not trap focus — users can navigate the page behind it.
- Dismiss action (accepting/rejecting) removes the banner from the DOM.
- Does not use role="dialog" — it is non-modal and should not interrupt page interaction.