CookieConsent

A consent bar that morphs into a preferences panel and, once a choice is saved, folds into a small button that reopens it.

When to use

• Asking visitors to allow or refuse optional cookie categories on a marketing site or web app.
• Letting people change their mind later from a floating button or a footer "Cookie settings" link (via the ref).
• Not for general notices or product news: use AnnouncementBar or Alert.

Usage

import { CookieConsent } from "@/components/iris/cookie-consent/cookie-consent";

h(CookieConsent, {
  storageKey: "notdocs-consent",
  version: "2",
  policy: { label: "Cookie policy", href: "/legal/cookies" },
  labels: {
    message: "notdocs.dev uses essential cookies to keep you signed in. With your OK, we would also use optional ones.",
  },
  position: "bottom",
  onChange: (value, { action }) => applyConsent(value),
});

Props

Prop	Type	Default	Description
categories	{ id, label, description?, required?, defaultEnabled? }[]	necessary, preferences, analytics, marketing	Groups people can allow. required ones are always on.
value / defaultValue	Record<string, boolean> | null	— / null	Saved choice; null means undecided. Omit value to let the component manage it.
onChange	(value, { action, updatedAt }) => void	—	action is "accept-all" | "reject-all" | "save" | "reset".
storageKey	string	—	Remembers the choice in localStorage.
version	string	"1"	Bump to ask everyone again when categories or policy change.
preferencesOpen / defaultPreferencesOpen / onPreferencesOpenChange	boolean / boolean / (open) => void	— / false / —	Control the preferences panel.
policy	{ label: string; href?: string; onClick?: () => void }	—	Policy link shown in the bar and panel.
position	"bottom" | "bottom-left" | "bottom-right"	"bottom"	Where the bar sits.
strategy	"fixed" | "absolute"	"fixed"	absolute fills the nearest positioned ancestor (useful for previews).
showReopenButton	boolean	true	Keep a small button after a choice.
reopenSide	"left" | "right"	bar's side	Corner for the reopen button.
labels	Partial<CookieConsentLabels>	English defaults	Override any copy: message, buttons, panel title, etc.
className	string	—	Extra class.

The ref exposes openPreferences(), closePreferences(), and reset().

Notes

• Non-essential categories start off and "Reject all" sits beside "Accept all", so refusing is as easy as accepting.
• The preferences panel is a non-modal role="dialog" labelled by its title; each switch is described by its category text.
• One surface springs between bar, panel, and button shapes; reduced motion crossfades.
• Reads --surface, --hover, --line, --line-soft, --line-strong, --ink, --ink-2, --ink-3, --shadow-floating.