---
title: IABConsentDialog
description: Show the IAB TCF 2.4 preference center with purposes, features and
  vendors in a Svelte app with IABConsentDialog.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Show the TCF preference center

`IABConsentDialog` is the IAB TCF 2.4 preference center. It has two tabs:
purposes, with stacks, special features and legitimate interest objections,
and vendors, with each vendor's purposes, data retention and privacy policy.
Render it next to `IABConsentBanner`; the banner's Customize button opens it:

```svelte title="src/lib/consent-surfaces.svelte"
<script lang="ts">
	import {
		ConsentBanner,
		ConsentDialog,
		IABConsentBanner,
		IABConsentDialog,
	} from '@c15t/svelte';
</script>

<!-- Visitors whose policy is not IAB get the standard banner and dialog. -->
<ConsentBanner />
<ConsentDialog />
<!-- Visitors under an IAB policy get the TCF banner and preference center. -->
<IABConsentBanner />
<IABConsentDialog />
```

## Props

|Prop|Type|Default|Behavior|
|--|--|--|--|
|`open`|`boolean`|follows the consent state|Controls visibility yourself.|
|`initialTab`|`'purposes'` or `'vendors'`|`'purposes'`|The tab it opens on, for example from a "See our partners" link.|
|`hideBranding`|`boolean`|`false`|Hides the "Secured by" tag.|
|`models`|`Model[]`|`['iab']`|Policy models it opens for.|
|`noStyle`|`boolean`|provider's `noStyle`|Drops c15t's classes.|
|`class`|`string`|none|Extra class on the root element.|

## Behavior

* It opens when the active surface is `'dialog'` under an IAB policy, the
  same state `ConsentDialog` uses for other policies. Opening preferences
  from `ConsentDialogLink` therefore shows this dialog to IAB visitors and
  `ConsentDialog` to everyone else.
* Switches change purpose consent, legitimate interest, special feature
  opt-ins and vendor consent in the TCF state. Save writes a new TC String.
* It needs the Global Vendor List. While the list loads,
  `getConsentManager().iab.isLoadingGVL` is `true`.

## Accessibility

The preference center is a `dialog` labelled with its title, with a close
button labelled from the `common.close` translation. Escape closes it. While
it is blocking, which is the default, focus stays inside it and the page does
not scroll. The purposes and vendors tabs are keyboard-operable tabs.

## Style the dialog

It needs `@c15t/svelte/styles.css` and `@c15t/svelte/iab/styles.css`, with
`styles={false}` on the provider. The root carries
`data-testid="iab-consent-dialog-root"`.