Library · Foundations

Foundations / Cookie Consent Banner

Dismissible cookie-consent bar; persists the choice in localStorage (tested store) and dispatches an `icreate:consent` event for analytics gating. Hidden until JS confirms no prior choice — no dead bar with JS off. Utility component: no tone axis.

Figma: Foundations / Cookie Consent Banner ↗

Live preview — edit theme bottom-right

---
import StateCookieConsent from "../components/figma/StateCookieConsent.astro";
---
<div style="min-block-size: 40vh;">
  <p style="padding: 24px; font-family: var(--font-body);">
    Scroll content — the consent bar is fixed to the bottom of the viewport (shows once, then
    remembers your choice). Clear this site's localStorage to see it again.
  </p>
  <StateCookieConsent policyHref="/privacy" />
</div>

Props

Name	Type	Required	Description
`message`	`string;`	—	Consent message
`acceptLabel`	`string;`	—	Accept button label (default: 'Accept')
`declineLabel`	`string;`	—	Decline button label (default: 'Decline')
`policyHref`	`string;`	Yes	Privacy-policy URL
`policyLabel`	`string;`	—	Privacy-policy link label (default: 'Privacy policy')
`position`	`"bottom" \| "top";`	—	Bar position (default: 'bottom')

Example with all props

<StateCookieConsent
  message="We use cookies to improve your experience."
  policyHref="/privacy"
  position="bottom"
/>