---
title: IABConsentDialog
description: An IAB TCF 2.3 compliant preference center with tabbed purpose and vendor management.
---
> ❌ **Error:**
> c15t is not yet IAB certified. The IAB TCF components are under active development and should not be used in production. APIs and behavior may change before certification is achieved.

`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:

```tsx
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 consent.io.
          // 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:

```tsx
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:

```tsx
<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:

|Button|Action|
|--|--|
|**Reject All**|Rejects all purposes and vendors, closes dialog and banner|
|**Accept All**|Accepts all purposes and vendors, closes dialog and banner|
|**Save Settings**|Saves current selections, closes dialog and banner|

## Props

### IABConsentDialogProps

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|open|boolean \|undefined|Control the open state. If omitted, follows activeUI === 'dialog' from context.|-|Optional|
|noStyle|boolean \|undefined|When true, removes all default styling.|false|Optional|
|disableAnimation|boolean \|undefined|When true, disables entrance/exit animations.|false|Optional|
|scrollLock|boolean \|undefined|When true, locks page scroll when the dialog is visible.|true|Optional|
|trapFocus|boolean \|undefined|When true, traps keyboard focus within the dialog.|true|Optional|
|hideBranding|boolean \|undefined|When true, hides the branding in the footer.|false|Optional|
|showTrigger|ConsentDialogTriggerProps \|undefined|Show a floating trigger button to resurface the consent dialog. IAB TCF requires the consent dialog to be easily resurfaceable. Options: \`true\` - Show trigger with default settings; \`false\` - Hide trigger (default); \`ConsentDialogTriggerProps\` - Show trigger with custom props|false|Optional|
|models|Model \|undefined|Which consent models this dialog responds to.|\['iab']|Optional|
|uiSource|string \|undefined|Override the UI source identifier sent with consent API calls.|'iab\_dialog'|Optional|