---
title: IABConsentBanner
description: Render the IAB TCF first layer in a Vue app with IABConsentBanner,
  when to import it instead of relying on ConsentRoot, and its props.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Import the IAB banner in place of `ConsentRoot`

`ConsentRoot` renders `IABConsentBanner` for you when the plugin's `iab`
option is set and the visitor's policy uses IAB TCF. Import it only when every policy on your site is IAB and you
compose the surfaces yourself. Import it from
`c15t/vue/vue-plugin`:

```vue title="src/IabSurfaces.vue"
<script setup lang="ts">
import { IABConsentBanner, IABConsentDialog } from 'c15t/vue/vue-plugin';
</script>

<template>
	<!-- Only for sites where every policy uses IAB TCF. ConsentRoot
	     switches between the IAB and standard surfaces for you. -->
	<IABConsentBanner />
	<IABConsentDialog initial-tab="purposes" />
</template>
```

Render this in place of `ConsentRoot`, and set the plugin's `iab` option; see
[IAB TCF](/docs/frameworks/vue/iab). A visitor whose policy is not IAB sees
nothing from these components. Without `iab`, an IAB policy throws an
`IABUnavailableError` instead.

## What IABConsentBanner renders

`IABConsentBanner` is the IAB TCF first layer. It renders while `activeUI`
is `'banner'`, the `iab` option is set, and the visitor's policy uses the
`iab` model with a vendor list. `ConsentRoot` renders it in place of
`ConsentBanner` under such a policy, so you only import it to compose the
surfaces yourself.

The banner lists the purposes, stacks and special features your vendors
use, with the vendor count as a link. Its footer has Reject All, Accept All
and Customize.

* Accept All and Reject All save an IAB choice and write the TC String. The
  banner waits for the full Global Vendor List before it saves. If the list
  fails to load, the banner stays open and nothing is granted.
* Customize opens the IAB preference centre on its Purposes tab.
* The vendor count link opens it on its Vendors tab.

Its text comes from the IAB translations the backend resolved. The component
loads its own styles.

## Props

|Prop|Type|Default|Behavior|
|--|--|--|--|
|`primaryButton`|`'reject' \|'accept' \|'customize'`|`'customize'`|Which action gets the primary style.|

Keep Accept All and Reject All at the same prominence unless your legal
review says otherwise.

## Accessibility and styling

The banner renders in `document.body`. When the prompt is blocking it is a
`dialog` with `aria-modal="true"` and traps focus. Otherwise it is a
`region`. The `components['iab-banner']` option adds attributes to its
parts, such as `root`, `card`, `title`, `purposeList`, `partnersLink` and
`footer`. `iabBannerHideBranding` hides the "Secured by" tag, and
`iabBannerModels` limits which policy models show it.

## Next steps

* [IAB TCF](/docs/frameworks/vue/iab) turns on IAB in your policy and
  verifies the TC String.
* [IABConsentDialog](/docs/frameworks/vue/components/iab-consent-dialog) is
  the preference centre this banner opens.