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: 'hosted', 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 tag:

<ConsentDialog hideBranding />;

Styling First

Info

If you are only changing visuals, stay with the stock dialog and use the theme system first. Start with tokens and slots such as consentDialogCard, consentWidgetFooter, and consentDialogTag. See Styling Overview.

<ConsentManagerProvider
  options={{
    theme: {
      colors: {
        surface: '#fffdf8',
        surfaceHover: '#f6f3ee',
      },
      slots: {
        consentDialogCard: 'rounded-[32px] shadow-xl',
        consentDialogHeader: 'gap-3',
        consentWidgetFooter: 'gap-3 pt-6',
        consentDialogTag: 'shadow-none',
      },
    },
  }}
>
  <ConsentDialog />
</ConsentManagerProvider>;

Dialog copy should be changed through ConsentManagerProvider.options.i18n, not by rebuilding the dialog structure.

Advanced: Compound Components

Use compound components only when you need custom dialog markup while still keeping c15t primitives and policy-aware footer actions:

<ConsentDialog.Root>
  <ConsentDialog.Overlay />
  <ConsentDialog.Card>
    <ConsentDialog.Header>
      <ConsentDialog.HeaderTitle />
      <ConsentDialog.HeaderDescription />
    </ConsentDialog.Header>
    <ConsentDialog.Content>
      <ConsentWidget.Root>
        <ConsentWidget.Accordion type="single">
          <ConsentWidget.AccordionItems />
        </ConsentWidget.Accordion>
        <ConsentWidget.PolicyActions />
      </ConsentWidget.Root>
    </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
ConsentWidget.PolicyActions — Renders policy-aware grouped dialog actions

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

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

ConsentWidget.PolicyActions uses stock c15t widget buttons and translations by default. Pass renderAction only when you need to customize the action mapping, and return stock widget button compounds if you want to preserve built-in behavior and copy.

For fully manual control over dialog action rendering, use useHeadlessConsentUI() and map dialog.actionGroups yourself.

If the stock dialog structure still works, prefer tokens, slots, and provider configuration instead.

Props

Property

Types

Loading…

ConsentDialog

Basic Usage

Controlled State

Floating Trigger

Branding

Styling First

Advanced: Compound Components

Props

plusminusdisableAnimation?boolean | undefined

plusminushideBranding?boolean | undefined

plusminuslegalLinks?any

plusminusmodels?any[] | undefined

plusminusnoStyle?boolean | undefined

plusminusopen?boolean | undefined

plusminusscrollLock?boolean | undefined

plusminusshowTrigger?any

plusminustheme?undefined

plusminustrapFocus?boolean | undefined

plusminusuiSource?string | undefined