Overlays
Cookie banner
Consent notice shown on first visit. Stateless by design — wire the handlers to your consent store and unmount it once a choice is made.
Purpose
The banner holds no state of its own. It renders the notice and calls back; deciding what a choice means, and remembering it, belongs to your consent store.
In real use it floats pinned to the bottom of the viewport — floating is disabled in the preview below so it sits inline.
Consent notice
We use cookies
We use essential cookies to make this site work, and optional analytics cookies to understand how it is used. Read our cookie policy.
Best practices
Do
- Give reject the same visual weight as accept.
- Link the privacy policy from the banner itself.
- Unmount once a choice is stored — never re-ask on every page.
Don't
- Block the whole page behind it unless the jurisdiction requires it.
- Set non-essential cookies before a choice has been made.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | undefined | "We use cookies" | Heading shown at the top of the banner. |
description | React.ReactNode | — | Short explanation of what the cookies are for. |
onAcceptAll | (() => void) | undefined | — | Called when the user accepts all cookies. |
onRejectNonEssential | (() => void) | undefined | — | Called when the user rejects non-essential cookies. |
onCustomize | (() => void) | undefined | — | Optional handler for a "Customise" action; the button is hidden when omitted. |
policyHref | string | undefined | — | Optional href to the cookie/privacy policy; the link is hidden when omitted. |
floating | boolean | undefined | true | Pin the banner to the bottom of the viewport. Disable to render it in normal flow (e.g. inside documentation previews). |