A material design cookie consent.
[ This description is mirrored from README.md at github.com/Dabolus/cookie-consent on 2019-05-22 ]
Demo and API docs
A great, simple and fully customizable material design cookie consent that automatically shows up only to the users subject to the cookie law (EU users).
- Ready out of the box. Just include it and insert a
<cookie-consent></cookie-consent>in your web app and you are ready to go!
- Fully customizable. It can be completely styled and it supports a lot of properties that allows you to easily change its default behavior.
- Easily detect what the user does. The readonly
cookies-statusproperty can be binded to detect whether the user consent is
rejected. It also fires a
cookies-status-changedevent when the user responds, so you can wait for the user to accept or reject the cookies before doing something with their data.
- Tested using the web-component-tester
bower install --save Dabolus/cookie-consent#^2.0.0
Custom text, policy link and consent rejection
<cookie-consent text="This website uses yummy cookies" policy-link="/policy" rejectable> </cookie-consent>
You can even set an empty text and then use a span with the slot
text to insert anything
you want (icons, etc.). The same can be done with the policy link. Just use the
slot in an anchor tag inside the
Note: the user response is saved by default in a permanent cookie.
You can change this behavior by adding the
The following custom properties and mixins are available for styling:
||The background color of the cookie consent||
||The color of text in the cookie consent||
||The color of the ink displayed when the reject button is pressed||
||The color of the ink displayed when the accept button is pressed||
||Mixin applied to the accept button||
||Mixin applied to the reject button||
||Mixin applied to both the accept and reject buttons||
||Mixin applied to the policy link||
||Mixin applied to the cookie consent text||
||Mixin applied to the cookie consent toast||
||Mixin applied to the cookie consent||
This element uses
paper-toast to display the consent.
paper-toast applies the mixin
--paper-font-common-base but does not import
In order to apply the
Roboto font to this element, make sure you've imported
Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.
- Polymer 2.0+
- Polymer 1.0+ in 1.0.0
- Browser Independent