---
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/nextjs';
import { IABConsentBanner, IABConsentDialog } from '@c15t/react/iab';

export default function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: '/api/c15t',
        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

| 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      | any                  | Show a floating trigger button to resurface the consent dialog.&#xA;IAB TCF requires the consent dialog to be easily resurfaceable.&#xA;&#xA;- \`true\` - Show trigger with default settings&#xA;- \`false\` - Hide trigger (default)&#xA;- \`ConsentDialogTriggerProps\` - Show trigger with custom props | false         | Optional |
| models           | any\[] \| 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 |