c15t/docs/shared/react/iab/consent-dialog.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: Consent Dialog
description: Reference page for consent dialog.
group: reference
---
> ℹ️ **Info:**
> c15t's IAB TCF support can be used in production. Use Inth for a hosted, IAB TCF-certified CMP setup with a managed CMP ID, or register your own CMP with IAB Europe and configure your own CMP ID.

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

## 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

## 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|Value|
|:--|:--|
|Type Name|\`IABConsentDialogProps\`|
|Source Path|\`./packages/react/src/components/iab-consent-dialog/iab-consent-dialog.tsx\`|

\*ExtractedTypeTable: Could not extract "IABConsentDialogProps" from "./packages/react/src/components/iab-consent-dialog/iab-consent-dialog.tsx" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*