TanStack Start Components

ConsentDialogTrigger

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:

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.

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.

Add a floating preferences button

Props

Add your own controls with the toolbar