IABConsentDialog

IABConsentDialog is an IAB TCF 2.3 compliant consent dialog that provides a tabbed interface for managing purpose consent and vendor preferences. It includes purpose grouping via stacks, individual purpose/vendor toggles, special purpose and feature disclosures, and legitimate interest handling.

Basic Usage

Pair it with IABConsentBanner inside the provider:

import { type ReactNode } from 'react';
import { iab } from '@c15t/iab';
import { ConsentManagerProvider } from '@c15t/react';
import { IABConsentBanner, IABConsentDialog } from '@c15t/react/iab';

export default function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: 'https://your-instance.c15t.dev',
        iab: iab({
          vendors: [1, 2, 10, 25],
          // cmpId is automatically provided by the backend when using Inth.
          // Only set this if you have your own CMP registration.
          // cmpId: 123,
        }),
      }}
    >
      <IABConsentBanner />
      <IABConsentDialog />
      {children}
    </ConsentManagerProvider>
  );
}

Tabs

The dialog has two tabs:

Purposes Tab

Displays all IAB purposes grouped into:

• Standalone purposes — Purpose 1 (Store and/or access information on a device) is always shown standalone per IAB TCF spec
• Stacks — Groups of related purposes determined by the GVL. Each stack is expandable to show individual purpose toggles
• Special features — Opt-in features like precise geolocation
• Essential functions — Special purposes and features that are locked (no user toggle) because they're required for basic operation

Each purpose shows:

• Name and description
• Number of vendors using this purpose
• Consent toggle (or lock icon for essential functions)
• Legitimate interest toggle where applicable
• Expandable vendor list

Vendors Tab

Displays all vendors from the GVL plus any custom vendors:

• Search and filter vendors
• Per-vendor consent and legitimate interest toggles
• Vendor details: privacy policy link, cookie usage, data retention
• Purpose and feature associations

Controlled State

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

import { useState } from 'react';
import { IABConsentDialog } from '@c15t/react/iab';

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

  return (
    <>
      <button onClick={() => setOpen(true)}>TCF Preferences</button>
      <IABConsentDialog open={open} />
    </>
  );
}

Floating Trigger

Add a floating button so users can re-open the dialog after dismissing the banner. IAB TCF requires the preference center to be easily resurfaceable:

<IABConsentDialog showTrigger />

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

Footer Actions

The dialog footer provides three buttons:

Props

Warning: ExtractedTypeTable: Could not extract "IABConsentDialogProps" from "./packages/react/src/components/iab-consent-dialog/iab-consent-dialog.tsx" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.