ConsentBanner

ConsentBanner is a ready-to-use consent banner that appears automatically in opt-in jurisdictions (like GDPR) where explicit consent is required before tracking. In opt-out jurisdictions (like CCPA), the banner won't appear — users get an opt-out mechanism instead. It includes reject, accept, and customize buttons with configurable layout.

Basic Usage

import { ConsentManagerProvider, ConsentBanner } from '@c15t/react';

export function ConsentManager() {
  return (
    <ConsentManagerProvider
      options={{ mode: 'c15t', backendURL: 'https://your-instance.c15t.dev' }}
    >
      <ConsentBanner />
    </ConsentManagerProvider>
  );
}

Customizing Content

Override the default title, description, and button labels:

<ConsentBanner
  title="We value your privacy"
  description="We use cookies to enhance your browsing experience and analyze site traffic."
  acceptButtonText="Accept all"
  rejectButtonText="Reject all"
  customizeButtonText="Manage preferences"
/>;

Button Layout

The layout prop controls button arrangement. Each item is either a button ID or an array of button IDs (which groups them together):

{
  /* Default: reject and accept grouped, customize separate */
}
<ConsentBanner layout={[['reject', 'accept'], 'customize']} />;

{
  /* All buttons in one group */
}
<ConsentBanner layout={[['reject', 'customize', 'accept']]} />;

{
  /* Accept first, then reject and customize grouped */
}
<ConsentBanner layout={['accept', ['reject', 'customize']]} />;

Primary Button

Highlight specific button(s) as the primary action:

{
  /* Single primary */
}
<ConsentBanner primaryButton="accept" />;

{
  /* Multiple primaries */
}
<ConsentBanner primaryButton={['accept', 'customize']} />;

Legal Links

Control which legal links appear in the banner description:

{
  /* Show all configured links (default) */
}
<ConsentBanner legalLinks={undefined} />;

{
  /* Show no links */
}
<ConsentBanner legalLinks={null} />;

{
  /* Show specific links */
}
<ConsentBanner legalLinks={['privacyPolicy', 'cookiePolicy']} />;

Info

Legal link URLs are configured in the ConsentManagerProvider options via the legalLinks prop, not on the banner itself.

Compound Components

Build fully custom banner layouts using sub-components:

<ConsentBanner.Root>
  <ConsentBanner.Overlay />
  <ConsentBanner.Card>
    <ConsentBanner.Header>
      <ConsentBanner.Title />
      <ConsentBanner.Description />
    </ConsentBanner.Header>
    <ConsentBanner.Footer>
      <ConsentBanner.FooterSubGroup>
        <ConsentBanner.RejectButton />
        <ConsentBanner.AcceptButton />
      </ConsentBanner.FooterSubGroup>
      <ConsentBanner.CustomizeButton />
    </ConsentBanner.Footer>
  </ConsentBanner.Card>
</ConsentBanner.Root>;

ConsentBanner.Root — Outermost container, provides theme context
ConsentBanner.Card — Main content card with optional focus trapping
ConsentBanner.Header — Contains title and description
ConsentBanner.Title — Heading, defaults to translation consentBanner.title
ConsentBanner.Description — Description text, supports legalLinks prop
ConsentBanner.Footer — Action buttons container
ConsentBanner.FooterSubGroup — Groups related buttons together
ConsentBanner.RejectButton — Rejects all consent
ConsentBanner.CustomizeButton — Opens the consent dialog
ConsentBanner.AcceptButton — Accepts all consent
ConsentBanner.Overlay — Optional backdrop overlay

Props

Property

Types

Loading…

ConsentBanner

Basic Usage

Customizing Content

Button Layout

Primary Button

Legal Links

Compound Components

Props

acceptButtonText?Content to display on the accept buttonReactNode

customizeButtonText?Content to display on the customize buttonReactNode

description?Content to display as the banner's descriptionReactNode

disableAnimation?When true, disables the entrance/exit animationsboolean | undefined

layout?Defines the layout of buttons in the footer. Allows reordering and grouping of buttons.{} | undefined

legalLinks?Controls which legal links to display. undefined (default): Shows all available legal links null: Explicitly hides all legal links Array of keys: Shows only the specified legal links {} | null | undefined

models?Which consent models this banner responds to.{} | undefined

noStyle?When true, removes all default styling from the componentboolean | undefined

primaryButton?Specifies which button(s) should be highlighted as the primary action.{} | ConsentBannerButton | undefined

rejectButtonText?Content to display on the reject buttonReactNode

scrollLock?When true, the consent banner will lock the scroll of the pageboolean | undefined

title?Content to display as the banner's titleReactNode

trapFocus?When true, the consent banner will trap focusboolean | undefined

uiSource?Override the UI source identifier sent with consent API calls.string | undefined