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

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

---
title: Consent Banner
description: Reference page for consent banner.
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.

`IABConsentBanner` is a pre-built consent banner that follows the [IAB Transparency & Consent Framework (TCF) 2.3](https://iabeurope.eu/tcf-2-0/) specification. It renders when the consent model is set to `'iab'` and includes required disclosures like partner count, purpose summaries, and legitimate interest notices.

Use this component instead of `ConsentBanner` when you need IAB TCF compliance for programmatic advertising in EU jurisdictions.

## When to Use

* Your site participates in the IAB TCF ecosystem (ad exchanges, SSPs, DSPs)
* You need to disclose vendor partnerships and data processing purposes per IAB requirements
* The detected jurisdiction requires IAB TCF compliance (typically EU/EEA)

> ℹ️ **Info:**
> The banner only renders when IAB mode is enabled and the GVL (Global Vendor List) has been loaded. If iab.enabled is false or the server does not return GVL data, nothing is rendered.

## Banner Content

The IAB banner automatically displays:

* **Title** — Heading text from IAB translations
* **Description** — Includes the partner count (e.g., "We and our \{partnerCount} partners...")
* **Partners link** — Clickable link that opens the vendor tab in the preference center
* **Purpose/stack list** — Up to 5 purpose/stack names summarizing data usage, with an "and X more" overflow
* **Legitimate interest notice** — Required IAB disclosure about legitimate interest processing
* **Scope notice** — Service-specific scope disclosure

## Buttons

The banner includes three action buttons:

|Button|Action|
|--|--|
|**Reject All**|Rejects all IAB purposes and closes the banner|
|**Accept All**|Accepts all IAB purposes and closes the banner|
|**Customize**|Opens the IABConsentDialog purposes tab|

### Primary Button

Highlight a specific button as the primary action:

```tsx
<IABConsentBanner primaryButton="accept" />
```

Options: `'reject'`, `'accept'`, `'customize'` (default: `'customize'`)

## Props

|Property|Value|
|:--|:--|
|Type Name|\`IABConsentBannerProps\`|
|Source Path|\`./packages/react/src/components/iab-consent-banner/iab-consent-banner.tsx\`|

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