---
title: IABConsentBanner
description: An IAB TCF 2.3 compliant consent banner that displays partner count, purpose summaries, and legitimate interest notices.
---
> ❌ **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.

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

## Basic Usage

```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>
  );
}
```

> ℹ️ **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         | Type                                             | Description                                                    | Default       | Required |
| :--------------- | :----------------------------------------------- | :------------------------------------------------------------- | :------------ | :------: |
| noStyle          | boolean \| undefined                             | When true, removes all default styling from the component.     | false         | Optional |
| disableAnimation | boolean \| undefined                             | When true, disables entrance/exit animations.                  | false         | Optional |
| scrollLock       | boolean \| undefined                             | When true, locks page scroll when the banner is visible.       | true          | Optional |
| trapFocus        | boolean \| undefined                             | When true, traps keyboard focus within the banner.             | true          | Optional |
| primaryButton    | "reject" \| "accept" \| "customize" \| undefined | Specifies which button should be highlighted as primary.       | 'customize'   | Optional |
| models           | any\[] \| undefined                              | Which consent models this banner responds to.                  | \['iab']      | Optional |
| uiSource         | string \| undefined                              | Override the UI source identifier sent with consent API calls. | 'iab\_banner' | Optional |