ConsentDialog

ConsentDialog is a modal that shows toggles for each consent category. In opt-in jurisdictions, it typically opens when users click "Customize" on ConsentBanner. It can also be controlled programmatically for use on settings pages regardless of jurisdiction.

Basic Usage

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

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

Controlled State

By default, the dialog follows activeUI === 'dialog' from the consent store. Use the open prop for manual control:

import { useState } from 'react';

function SettingsPage() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Privacy Settings</button>
      <ConsentDialog open={open} />
    </>
  );
}

Or use the hook to open it programmatically:

import { useConsentManager } from '@c15t/react';

function PrivacyLink() {
  const { setActiveUI } = useConsentManager();

  return <button onClick={() => setActiveUI('dialog')}>Manage cookies</button>;
}

Floating Trigger

Add a floating button that lets users re-open the dialog after dismissing the banner:

{
  /* Default trigger */
}
<ConsentDialog showTrigger />;

{
  /* Custom trigger */
}
<ConsentDialog
  showTrigger={{
    icon: 'settings',
    defaultPosition: 'bottom-left',
    showWhen: 'after-consent',
    size: 'sm',
  }}
/>;

Branding

Hide the c15t branding in the dialog footer:

<ConsentDialog hideBranding />;

Compound Components

Build fully custom dialog layouts using sub-components:

<ConsentDialog.Root>
  <ConsentDialog.Overlay />
  <ConsentDialog.Card>
    <ConsentDialog.Header>
      <ConsentDialog.HeaderTitle />
      <ConsentDialog.HeaderDescription />
    </ConsentDialog.Header>
    <ConsentDialog.Content>
      <ConsentWidget />
    </ConsentDialog.Content>
    <ConsentDialog.Footer />
  </ConsentDialog.Card>
</ConsentDialog.Root>;

ConsentDialog.Root — Portal container with focus trap, scroll lock, and animation
ConsentDialog.Card — Main dialog card
ConsentDialog.Header — Contains title and description
ConsentDialog.HeaderTitle — Dialog title
ConsentDialog.HeaderDescription — Description with optional legalLinks
ConsentDialog.Content — Main content area (typically contains ConsentWidget)
ConsentDialog.Footer — Footer with optional branding (hideBranding prop)
ConsentDialog.Overlay — Backdrop overlay

For a quick pre-composed layout, use the shorthand card:

<ConsentDialog.Root>
  <ConsentDialog.ConsentCustomizationCard />
</ConsentDialog.Root>;

Props

Property

Types

Loading…

ConsentDialog

Basic Usage

Controlled State

Floating Trigger

Branding

Compound Components

Props

disableAnimation?Disables all animations when trueboolean | undefined

hideBranding?Controls whether to hide the branding in the dialog footer.boolean | 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 dialog responds to.{} | undefined

noStyle?Removes default styles when trueboolean | undefined

open?Control the open state. If omitted the dialog follows useConsentManager().activeUI === 'dialog'.boolean | undefined

scrollLock?Locks the scroll when trueboolean | undefined

theme?Theme configuration override (deprecated)undefined

trapFocus?Traps keyboard focus within a dialog when trueboolean | undefined

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