Cookies Banner

Cookies Banner is a fixed consent banner displayed at the bottom of the viewport. It renders a default cookie message, an optional learn-more link, and three actions for rejecting cookies, allowing only functional cookies, or accepting all cookies.

Preview

We use cookies to improve your experience and analyze site usage. You can choose which cookies to accept. Learn more

Usage

tsx

1
2
3
4
5
6
7
import { CookiesBanner } from "@e-infra/design-system"

<CookiesBanner
  onReject={() => rejectCookies()}
  onFunctional={() => allowFunctionalCookies()}
  onAccept={() => acceptAllCookies()}
/>

Default Rendering

tsx

1
<CookiesBanner />

Custom Content

tsx

1
2
3
4
5
6
7
8
9
<CookiesBanner
  message={
    <>
      <strong>We use cookies</strong> to personalize content and measure usage.{' '}
    </>
  }
  learnMoreLink={<a href="/privacy">Read policy</a>}
  onAccept={() => acceptAllCookies()}
/>

Props

Prop	Type	Default	Description
message	`React.ReactNode`	`<><strong>We use cookies</strong> to improve your experience and analyze site usage. You can choose which cookies to accept.{" "}</>`	Main banner content
learnMoreLink	`React.ReactNode`	`<a href="/cookies" className="text-primary hover:text-primary-600 underline font-medium transition-colors duration-200">Learn more</a>`	Link rendered after the message
onReject	`() => void`	`undefined`	Called when the `Reject` button is clicked
onFunctional	`() => void`	`undefined`	Called when the `Only Functional` button is clicked
onAccept	`() => void`	`undefined`	Called when the `Accept All` button is clicked
className	`string`	-	Additional classes merged onto the outer banner container
...props	`React.ComponentProps<"div">`	-	Native `div` props applied to the outer container

Structure

Part	Details
Outer container	`fixed bottom-0 left-0 right-0 bg-surface border-t border-border shadow-lg z-50`
Inner wrapper	`container mx-auto px-4 py-4`
Content layout	`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4`
Message area	Uses the `Small` typography primitive with `text-text`
Actions	`flex flex-row gap-2 shrink-0` with three `size="sm"` buttons

Actions

Action	Variant	Purpose
Reject	`ghost`	Declines non-essential cookies
Only Functional	`ghost`	Accepts only required cookies
Accept All	`default`	Accepts all cookies

Behavior

Behavior	Details
Positioning	Fixed to the bottom of the viewport by default
Responsiveness	Vertical layout on small screens, horizontal layout from `sm:` upward
Message customization	Both `message` and `learnMoreLink` can be replaced
Styling override	`className` can be used to adapt positioning or appearance in special contexts such as docs previews
Event handling	Buttons call optional callbacks (`onReject`, `onFunctional`, `onAccept`) when provided