Marketing

CookieBar

The consent notice, with the two properties that make consent valid built into its shape.

CookieBar

import { CookieBar } from '@anomalia/ui';

Notes

Reject is the same size, variant and weight as Accept, at every width including the one where these banners usually start cheating. A prominent "Accept all" beside a grey text link is a pattern regulators have repeatedly ruled invalid.
It does not trap the page: no scrim, no focus trap, no modal. Consent must be freely given, and a wall that cannot be dismissed without choosing is coercion.
It is a polite region, not an alert — a cookie notice is not an emergency.
The caller owns persistence. A library component should never decide what your cookie policy stores.

Examples

Consent

Reject is the same size, variant and weight as Accept, at every width. It is a polite region rather than a modal — consent has to be freely given, and a wall you cannot dismiss without choosing is not a choice.

It renders fixed to the bottom of the viewport, which is where it lives in a real page.

API

Prop	Type	Default	Description
`open`	`boolean`	`true`	Bindable. Both actions close it.
`title / description`	`string`	—	The notice.
`acceptLabel / rejectLabel`	`string`	—	Equal choices, equally labelled.
`settingsLabel`	`string`	—	Opens granular preferences. Omit if you have none.
`onaccept / onreject / onsettings`	`() => void`	—	Persistence is yours.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.