Untitled

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.

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

<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