# Consent Banner

Source: https://lumeo.nativ.sh/components/consent-banner

# Consent Banner

GDPR-ready cookie / tracking consent primitive. Persists per-category choices in localStorage and exposes them via ConsentService for gating third-party scripts.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<ConsentBanner />

## When to use

-   Any site that loads analytics (Google Analytics, Cloudflare Web Analytics, Plausible, Umami) in the EU / UK / CA.
-   Any site that embeds third-party scripts users should opt into (YouTube embeds, Intercom, Hotjar).
-   SaaS apps that want to give end users a _"Manage cookie preferences"_ link in the footer.

Preview Code

Open the banner on this page

Open preferences Reset (re-show banner)

Analytics consent right now: denied.

The banner in the docs site already ran once (accepted/declined at first visit). Click below to re-open its preferences dialog — it's the same API a consumer would wire to a footer link.

Preview Code

Minimal setup

No live preview here — the banner can only show once per browser. Copy the code into your own `MainLayout.razor` to see it slide in.

Drop the banner into your root layout. Default categories are \`necessary\` (locked) + \`analytics\`.

Preview Code

Gate analytics behind consent

Analytics consent:

Denied

No beacon. Nothing leaves the browser.

Toggle Analytics in cookie preferences to see this flip.

The whole point: nothing hits a third-party until the user says yes.

Preview Code

Custom categories

Consent preferences

Pick which categories you're okay with. You can change this later.

Strictly necessaryRequired

Session, theme preference, routing — required for the site to work.

Analytics

Cloudflare Web Analytics — anonymous aggregate page-view stats.

Marketing

Meta Pixel and LinkedIn Insight Tag for remarketing.

Third-party embeds

YouTube, Vimeo, Tweet embeds — set cookies when loaded.

Define your own buckets — one per third-party service you load.

Preview Code

Reopen from a footer link

Site footer

© 2026 Your Company. All rights reserved.

[Privacy](#) [Terms](#) Manage cookie preferences

↑ Click _Manage cookie preferences_ — the dialog pops open via `Consent.RequestOpenPreferences()`.

ConsentService fires an event when any caller requests the dialog — no component refs, no CascadingValue plumbing.

Preview Code

Localized strings

English Deutsch Français

Cookies & consent

We use a minimal set of cookies to run the site and optionally measure anonymous usage to improve it. You choose what's on.

Customize Reject optional Accept all

Every string is a parameter. Pair with \`ILumeoLocalizer\` if you want them to follow the user's language.

## API reference

### <ConsentBanner>

Prop

Type

Default

Description

Categories

IReadOnlyList<ConsentCategory>

\[necessary, analytics\]

Buckets shown in the preferences dialog. Replace entirely to match your own site's third-party services.

PrivacyPolicyUrl

string?

null

Rendered as a link in the banner copy. Omit to hide the link.

Title

string

"Cookies & consent"

Heading shown at the top of the banner.

Description

string

default blurb

Body copy below the heading.

PrivacyPolicyLabel

string

"Read the privacy policy"

Link text for the privacy-policy anchor.

AcceptLabel

string

"Accept all"

Primary button label.

RejectLabel

string

"Reject optional"

Secondary button label. Rejection means every non-required category is stored as `false`.

CustomizeLabel

string

"Customize"

Opens the preferences dialog with per-category toggles.

PreferencesTitle

string

"Consent preferences"

Heading inside the preferences dialog.

PreferencesDescription

string

default

Body copy inside the preferences dialog.

RequiredBadge

string

"Required"

Badge shown next to locked-on categories.

SaveLabel / CancelLabel

string

"Save preferences" / "Cancel"

Preferences dialog footer buttons.

AnimationClass

string

"animate-slide-in-from-bottom"

Tailwind animation class used for the banner entry.

### ConsentCategory

Property

Type

Description

Key

string

Machine-readable identifier (e.g. `"analytics"`). Used as the persistence key and the argument to `ConsentService.HasConsent(key)`.

Title

string

Short label shown in the preferences dialog.

Description

string

One-sentence explanation for the end user.

Required

bool

Locked-on toggle. Use for strictly-necessary cookies (session, theme preference).

### ConsentService

Member

Description

bool HasDecided

True once the user has answered the banner. While false, the banner shows.

bool HasConsent(string key)

Did the user consent to this category? `"necessary"` always returns true; unknown keys return false.

Task EnsureLoadedAsync()

Hydrate from `localStorage`. Called automatically by the banner on first render; safe to call yourself before the banner mounts.

Task AcceptAllAsync(IEnumerable<string>)

Grant every non-necessary category. Persists to localStorage. Fires `OnChange`.

Task RejectAllAsync(IEnumerable<string>)

Deny every non-necessary category. Persists and fires `OnChange`.

Task SetManyAsync(IReadOnlyDictionary<string, bool>)

Commit a per-category map. Used by the preferences dialog's Save button.

Task ResetAsync()

Clear the stored decision — banner re-appears on next render.

void RequestOpenPreferences()

Ask any mounted `<ConsentBanner>` to pop its dialog. Wire a "Manage cookies" footer link to this.

event Action? OnChange

Fires when any category value changes. Subscribe if you want to dynamically load / unload scripts.

event Action? OnRequestOpenPreferences

Internal coordination between `RequestOpenPreferences` and the banner.