---
title: ConsentDialogTrigger
description: Add a floating button or toolbar to a TanStack Start app that
  reopens the c15t preference dialog after the first prompt.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Add a floating preferences button

`ConsentDialogTrigger` is a draggable floating button that opens the
preference dialog. Render it once inside `ConsentRoot`, next to the banner and
dialog:

```tsx title="src/routes/__root.tsx"
import { ConsentDialogTrigger } from 'c15t/tanstack-start';

// Inside ConsentRoot, next to ConsentDialog:
<ConsentDialogTrigger showWhen="after-prompt" />;
```

`showWhen="after-prompt"` hides the button while a choice or notice is owed, so
it never competes with the banner. It renders nothing until a policy resolves,
and nothing under a policy that owes no rights.

## Props

|Prop|Type|Default|Description|
|--|--|--|--|
|`icon`|`'branding' \|'fingerprint' \|'settings' \|ReactNode`|`'branding'`|Icon rendered inside the button.|
|`defaultPosition`|`'bottom-left' \|'bottom-right' \|'top-left' \|'top-right'`|`'bottom-right'`|Corner the button starts in.|
|`persistPosition`|`boolean`|`true`|Remember the corner the visitor dragged it to.|
|`showWhen`|`'always' \|'after-prompt' \|'never'`|`'always'`|When the button is visible. `after-prompt` waits until no choice or notice is owed.|
|`size`|`'sm' \|'md' \|'lg'`|`'md'`|Button size.|
|`ariaLabel`|`string`|`'Open privacy settings'`|Accessible name.|
|`noStyle`|`boolean`|`false`|Remove the default styling.|

## Add your own controls with the toolbar

`ConsentDialogTriggerToolbar` renders one built-in preferences action plus
controls your app owns, such as a theme toggle. Each action needs a stable
`id`, a `label`, an `icon` and an `onSelect` callback. Import it from
`c15t/tanstack-start`.

|Prop|Type|Default|Description|
|--|--|--|--|
|`actions`|`ConsentDialogTriggerToolbarAction[]`|`[]`|App-owned actions rendered beside the preferences action.|
|`preferences`|`ConsentDialogTriggerToolbarPreferences`|`{}`|Overrides for the built-in action: `icon`, `label`, `onSelect`, `className`, `style`. The label defaults to the opt-out or preferences right on the active rule.|
|`orientation`|`'horizontal' \|'vertical'`|`'horizontal'`|Layout direction.|
|`defaultPosition`|`CornerPosition`|`'bottom-right'`|Corner the toolbar starts in.|
|`persistPosition`|`boolean`|`true`|Remember the dragged corner.|
|`showWhen`|`'always' \|'after-prompt' \|'never'`|`'always'`|When the built-in preferences action is visible. App-owned actions always render. `after-prompt` waits until no choice or notice is owed.|
|`size`|`'sm' \|'md' \|'lg'`|`'md'`|Size of each action.|
|`ariaLabel`|`string`|`'Privacy controls'`|Accessible name for the toolbar group.|
|`noStyle`|`boolean`|`false`|Remove the default styling.|

While `<ConsentDevTools>` is mounted, the toolbar adds a DevTools button at
the end farthest from its corner and opens the DevTools panel beside itself.
The ready-made `ConsentDialogTrigger` switches to this toolbar layout for as
long as DevTools is mounted.