---
title: ConsentDialogTrigger
description: Show a floating, draggable button that reopens the c15t preference
  dialog in Nuxt, and configure its corner, size, icon and label.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Turn on the trigger in `nuxt.config.ts`

Turn the trigger on with `showTrigger` in the module options. `ConsentRoot`
then renders it. The trigger options are plain data, so they can go in
`nuxt.config.ts`:

```ts title="nuxt.config.ts"
export default defineNuxtConfig({
	c15t: { showTrigger: true, triggerDefaultPosition: 'bottom-left' },
});
```

The module also registers `ConsentDialogTrigger` globally. When you compose
the surfaces without `ConsentRoot`, render it yourself:

```vue title="app/components/ConsentSurfaces.vue"
<script setup lang="ts">
// The module registers ConsentDialogTrigger globally. It does not register
// the banner or the dialog, so import them.
import ConsentBanner from 'c15t/vue/runtime/components/consent-banner.vue';
import ConsentManager from 'c15t/vue/runtime/components/consent-manager.vue';
</script>

<template>
	<!-- Render these in app.vue in place of ConsentRoot, not next to it. -->
	<ConsentBanner variant="bar" position="bottom" />
	<ConsentManager />
	<ConsentDialogTrigger />
</template>
```

## What ConsentDialogTrigger renders

`ConsentDialogTrigger` renders a round floating button, fixed to a corner of
the viewport, that opens the preference dialog. Visitors can drag it to
another spot. It has no props. Your c15t options configure it.

The trigger renders in the browser only, after mount, in `document.body`. It
hides while the preference dialog is open, until the visitor's policy has
resolved, and when the policy owes no consent UI. Under the default
`triggerShowWhen: 'after-consent'`, it also stays hidden while the banner
waits for an answer, and appears once the visitor saves a choice or
dismisses a notice.

While `ConsentDevTools` is mounted, the trigger becomes a two-button
toolbar: the preferences button in the corner and a DevTools button beside
it that opens the DevTools panel next to the toolbar.

## Options

|Option|Type|Default|Behavior|
|--|--|--|--|
|`showTrigger`|`boolean`|`false`|Makes `ConsentRoot` render the trigger.|
|`triggerDefaultPosition`|`'top-left' \|'top-right' \|'bottom-left' \|'bottom-right'`|`'bottom-right'`|Starting corner.|
|`triggerSize`|`'sm' \|'md' \|'lg'`|`'md'`|32, 40 or 48 pixels.|
|`triggerIcon`|`'branding' \|'fingerprint' \|'settings'`|`'fingerprint'`|The icon inside the button. `'branding'` shows the c15t or Inth mark.|
|`triggerPersistPosition`|`boolean`|`true`|Remembers where the visitor dragged it, in localStorage under `c15t:dialog-trigger-position`.|
|`triggerShowWhen`|`'always' \|'after-consent' \|'never'`|`'after-consent'`|`'after-consent'` shows the trigger once the policy owes no prompt: the visitor saved a choice or dismissed a notice. `'always'` also shows it while the banner is open. `'never'` hides it.|
|`triggerAriaLabel`|`string`|`'Open privacy settings'`|The button's accessible name.|

All trigger options go under the `c15t` key in `nuxt.config.ts` or
`app.config.ts`.

## Accessibility and styling

The trigger is a native `button` with `aria-label` set from
`triggerAriaLabel`. The icon is hidden from assistive technology. Set
`triggerAriaLabel` in the visitor's language, because the default is
English.

The `components.trigger` option adds attributes to `root`, `icon` and
`text`. Setting `components.trigger.text`, even to `{}`, shows
`triggerAriaLabel` as visible text next to the icon. The button carries
`data-size` and, while dragged, `data-dragging`.
The toolbar shown while `ConsentDevTools` is mounted takes `toolbar`,
`toolbarItem` and `toolbarIcon` instead.

## Verify

Load a page under a policy with a prompt and answer the banner. Confirm the
button appears in the corner you set. Click it and the preference dialog opens while the
button hides. Drag it, reload, and confirm it keeps its place when
`triggerPersistPosition` is on.

## Next steps

* [ConsentDialogLink](/docs/frameworks/nuxt/components/consent-dialog-link)
  is an inline alternative for a footer.
* [Nuxt module](/docs/frameworks/nuxt/module) lists every option.