Blocks

Cookie Notice

A small card in the corner about essential cookies, with a "Learn more" link and a "Got it" button; the choice is kept in a cookie.

A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks.

Features3

API

Theming

Basic

The translated texts and a link to the privacy page. "Got it" hides the notice and keeps that in a cookie; show() brings it back. Here the frame plays the window.

6 lines

<div class="screen">  <button txButton severity="secondary" outlined icon="refresh" (click)="notice.show()">    Show the notice again  </button>  <tx-cookie-notice #notice cookieName="docs-cookie-basic" [link]="['/']" /></div>

Own texts

Own title, text, icon, button and link texts; href for a link outside the app. Each notice keeps its choice under its own cookieName.

15 lines

<div class="screen">  <button txButton severity="secondary" outlined icon="refresh" (click)="notice.show()">    Show the notice again  </button>  <tx-cookie-notice    #notice    cookieName="docs-cookie-own"    icon="lock"    title="Your session stays private"    text="We keep one cookie so you stay signed in on this device. Nothing else is stored."    acceptLabel="Fine"    linkLabel="How we store data"    href="https://example.com/privacy"  /></div>

Design tokens

dt changes the tokens of one notice: here wider, solid, with a filled icon.

13 lines

<div class="screen">  <button txButton severity="secondary" outlined icon="refresh" (click)="notice.show()">    Show the notice again  </button>  <tx-cookie-notice    #notice    cookieName="docs-cookie-tokens"    [dt]="{      root: { wideWidth: '420px', borderRadius: '10px', background: 'var(--tx-surface-card)' },      icon: { background: 'var(--tx-primary-base)', color: 'var(--tx-primary-contrast)' },    }"  /></div>