Public web component documentation for consent-dialog, consent-guard, and consent-missing.
Main entry component for the PrivacyKit consent UI and orchestration logic.
| Property | Type | Default / Required | Description |
|---|---|---|---|
| variant | standard | panel | modern | modest | standard | Visual variant of the dialog. |
| theme | standard | dark | teal | slate | light | vibrant | high-contrast | standard | Visual theme of the dialog. |
| expires-days | number | 180 | Cookie lifetime in days. |
| version | number | 0 | Consent schema version used for re-consent decisions. |
| locale | da | de | en | es | fi | fr | it | nl | no | pl | sv | browser-derived | Locale override. |
| hide-necessary | boolean | unset | Hides necessary consent section in the dialog. |
| hide-preferences | boolean | unset | Hides the preferences category. |
| hide-analytics | boolean | unset | Hides the analytics category. |
| hide-marketing | boolean | unset | Hides the marketing category. |
| hide-readmore | boolean | unset | Hides the expandable Read More section. |
| hide-privacy-policy-link | boolean | unset | Hides the default Privacy Policy link. Typically used when you supply your own policy link in the Read More section. |
| demo | boolean | unset | Demo mode: disables auto-open and limits certain features. Not GDPR compliant and must not be used in production. |
| dismissible | boolean | false | Controls whether dialog can be dismissed via backdrop/escape if no accept/reject consent has been given. |
Example
<consent-dialog theme="panel" variant="dark" expires-days="90"
version="1" locale="en" hide-marketing hide-privacy-policy-link dismissible>
</consent-dialog>Inject custom content into specific parts of a component using named HTML slots — giving you full control over content and styling without modifying the component itself.
| Slot Name | Description |
|---|---|
| dialog-logo | Optional logo content shown in the dialog header. |
| dialog-title | Overrides the title in the dialog header. |
| dialog-summary-part-1 | Injects custom text for the first intro paragraph below the dialog title. |
| dialog-summary-part-2 | Injects custom text for the second intro paragraph that explains consent choices. |
| necessary-content | Replaces the default description for the Necessary category. |
| preferences-content | Custom text inside the Preferences category accordion body. |
| analytics-content | Custom text inside the Analytics category accordion body. |
| marketing-content | Custom text inside the Marketing category accordion body. |
| read-more-title | Sets the heading for the expandable “Read more” section at the bottom. |
| read-more-content | Supplies the body content shown when the “Read more” section expands. |
| privacy-policy-content | Replaces the default Privacy Policy copy. Use wording vetted by your own legal counsel, because PrivacyKit can’t verify GDPR compliance once you customize it. |
Example
<consent-dialog theme="standard" variant="standard" locale="en" version="1">
<img slot="dialog-logo" width="100px" src="/logo.png" alt="Company logo" />
<div slot="dialog-title" class="your-class">
<h2>We use cookies</h2>
</div>
<span slot="marketing-content">
<b>We currently do not collect cookies for marketing purposes.</b>
</span>
</consent-dialog>
Design tokens expose a stable set of CSS variables that let you customize appearance—colors, spacing, typography, and more—without touching the component's internal implementation. Built-in themes are powered by the same token system, allowing you to override individual styles or create a completely custom appearance.
| Design Tokens | Description |
|---|---|
| --pk-bg-color | Surface background for the entire dialog shell. |
| --pk-paper-color | Paper surface for cards, accordions, and panels inside the dialog. |
| --pk-text-color | Base text color applied to headings and body text. |
| --pk-primary-color | Primary accent used for CTAs, focus rings, and links. |
| --pk-text-color-on-primary | Text color used on elements filled with the primary color, such as solid buttons. |
| --pk-secondary-color | Secondary accent, mainly used for the switch/thumb UI state. |
| --pk-focus-ring-color | Focus outline color used for keyboard focus states. |
| --pk-border-color | Border color applied to panel outlines, tables, and divider strokes. |
| --pk-border-width | Border width applied to panel outlines, tables, and divider strokes. |
| --pk-font-family | Font stack for all textual elements; falls back to your body font token. |
| --pk-spacing-unit | Spacing scale unit that drives paddings/gaps between sections. |
| --pk-control-radius | Corner radius for buttons, inputs, and interactive controls. |
| --pk-dialog-radius | Corner radius for the outer consent dialog container. |
| --pk-dialog-shadow | Box shadow applied to the consent dialog overlay. |
| --pk-dialog-max-height | Maximum height of the consent dialog; when content exceeds this limit, the dialog body scrolls. |
Example
<consent-dialog theme="light" style="
--pk-bg-color: #faf7f2;
--pk-paper-color: #f7eede;
--pk-primary-color: #b08968;
--pk-font-family: 'Segoe UI', Tahoma, sans-serif;
--pk-control-radius: 10px;
--pk-dialog-radius: 20px;
--pk-dialog-shadow: 10px 20px rgba(0, 0, 0, 0.5);
--pk-dialog-max-height: 50vh;
">
</consent-dialog>openConsentDialog(): void
onConsentDialogClosed(callback: () => void): () => void
openPrivacyPolicyDialog(): voidConditionally renders children once the provided consent expression evaluates to true.
| Property | Type | Default / Required | Description |
|---|---|---|---|
| consent | string | all categories | Consent expression to evaluate before rendering children. |
Example 1 - Block/load scripts
<consent-guard consent="marketing">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm/js"></script>
</consent-guard>
Example 2 - Block/load HTML content
<consent-guard consent="analytics+marketing">
<iframe
title="YouTube video"
data-src="https://www.youtube.com/embed/abc123"
width="560"
height="315"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</consent-guard>
Render fallback content whenever an associated consent-guard blocks the primary experience.
| Property | Type | Default / Required | Description |
|---|---|---|---|
| for | string | required | Id of the related <consent-guard> element. |
Example
<consent-guard id="analytics-guard" consent="analytics">
<script type="text/plain" data-src="https://example.com/analytics.js"></script>
</consent-guard>
<consent-missing for="analytics-guard">
Please accept analytics cookies to continue.
</consent-missing>
