@xsolla/xui-gdpr-banner

The Xsolla cookie-consent (GDPR) banner. Implements the Figma GDPR-banner component set. Also re-exported from @xsolla/xui-feedback.

Full API reference: docs/api/components/gdpr-banner.md

Installation

yarn add @xsolla/xui-gdpr-banner

Usage

import { GdprBanner } from "@xsolla/xui-gdpr-banner";

<GdprBanner
  cookiePolicyUrl="https://xsolla.com/cookie-policy"
  privacyPolicyUrl="https://xsolla.com/privacy-policy"
  onAcceptAll={() => consent.acceptAll()}
  onRejectAll={() => consent.rejectAll()}
  onConfirmSelection={(ids) => consent.save(ids)}
  onClose={() => setVisible(false)}
/>;

Figma variant mapping

| Figma variant | Prop | Values | | --- | --- | --- | | Type | type | "complex" (default) | "simple" | | Fold | expanded | false (runtime default) | true | | Buttons row | buttonsRow | "single" (default) | "double" | | Viewport | viewport | "desktop" (default) | "mobile" |

Layout

| State | Behaviour | | --- | --- | | Desktop, collapsed | 400px card pinned to a bottom corner with a 20px inset | | Desktop, expanded | Full-bleed bottom bar with the two-column Privacy settings panel | | Mobile | Bottom-anchored, full width, stacked actions |

Accessibility

role="dialog" labelled by the visible heading, focus pulled in on mount and on expand, Tab/Shift+Tab cycling inside the banner, Escape fires onClose, and an explicit aria-label on the close control.