c15t/docs/shared/react/components/consent-dialog-trigger.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: Consent Dialog Trigger
description: Reference page for consent dialog trigger.
group: reference
---
`ConsentDialogTrigger` is a floating button that opens the consent dialog when clicked. Users can drag it to any corner of the screen, and the position persists across sessions. Use it to give users a persistent way to manage their privacy settings.

## Icon Options

```tsx
{/* Built-in icons */}
<ConsentDialogTrigger icon="branding" />    {/* c15t logo (default) */}
<ConsentDialogTrigger icon="fingerprint" /> {/* Privacy icon */}
<ConsentDialogTrigger icon="settings" />    {/* Gear icon */}

{/* Custom icon */}
<ConsentDialogTrigger icon={<MyCustomIcon />} />
```

## Configurable Toolbar

Use the separate `ConsentDialogTriggerToolbar` when you want to place app-owned controls beside the privacy trigger. It always renders exactly one built-in action that opens consent preferences, so `actions` only contains controls your app owns.

```tsx
<ConsentDialogTriggerToolbar
  ariaLabel="Site controls"
  actions={[
    {
      id: 'theme',
      label: isDark ? 'Switch to light theme' : 'Switch to dark theme',
      icon: isDark ? <SunIcon /> : <MoonIcon />,
      pressed: isDark,
      onSelect: toggleColorScheme,
    },
    {
      id: 'support',
      label: 'Open support chat',
      icon: <ChatIcon />,
      onSelect: openSupportChat,
    },
  ]}
  preferences={{
    icon: 'fingerprint',
    label: 'Manage privacy settings',
  }}
/>
```

Each custom action requires a stable `id`, accessible `label`, `icon`, and `onSelect` callback. Use `pressed` for toggle actions and `disabled` for unavailable actions. Your app remains responsible for state, integrations, and changing the icon or label. The preferences action automatically moves to the edge nearest the toolbar's snapped corner while custom actions keep their configured order.

Toolbars are horizontal by default. Set `orientation="vertical"` to stack the actions and enable Up/Down arrow-key navigation:

```tsx
<ConsentDialogTriggerToolbar
  orientation="vertical"
  actions={toolbarActions}
/>
```

### Toolbar Styling

The toolbar follows the standard styling precedence: internal CSS module styles, provider theme slots, then direct component overrides. Use `className` and `style` on the toolbar, or on an individual action, and use `noStyle` for a fully custom implementation.

```tsx
<ConsentManagerProvider
  options={{
    theme: {
      slots: {
        consentDialogTriggerToolbar: 'my-toolbar',
        consentDialogTriggerToolbarItem: 'my-toolbar-item',
        consentDialogTriggerToolbarIcon: 'my-toolbar-icon',
      },
    },
  }}
>
  <ConsentDialogTriggerToolbar
    className="fixed-toolbar"
    style={{ '--cdtt-offset': '24px' }}
    actions={[
      {
        id: 'support',
        label: 'Open support chat',
        icon: <ChatIcon />,
        onSelect: openSupportChat,
        className: 'support-action',
      },
    ]}
  />
</ConsentManagerProvider>
```

Available toolbar theme slots are `consentDialogTriggerToolbar`, `consentDialogTriggerToolbarItem`, and `consentDialogTriggerToolbarIcon`.

With `noStyle`, use `data-corner`, `data-dragging`, and `data-snapping` on the toolbar to style its current position and interaction state.

## Visibility

Control when the trigger is visible:

```tsx
{/* Always visible (default) */}
<ConsentDialogTrigger showWhen="always" />

{/* Only after user has made a consent choice */}
<ConsentDialogTrigger showWhen="after-consent" />

{/* Hidden (control visibility programmatically) */}
<ConsentDialogTrigger showWhen="never" />
```

## Position

Set the default corner and control persistence:

```tsx
<ConsentDialogTrigger
  defaultPosition="bottom-left"
  persistPosition={true} // Remembers user's drag position
  onPositionChange={(position) => console.log('Moved to:', position)}
/>
```

## Size

```tsx
<ConsentDialogTrigger size="sm" /> {/* Small */}
<ConsentDialogTrigger size="md" /> {/* Medium (default) */}
<ConsentDialogTrigger size="lg" /> {/* Large */}
```

## Compound Components

Build fully custom trigger layouts using sub-components:

```tsx
<ConsentDialogTrigger.Root defaultPosition="bottom-right">
  <ConsentDialogTrigger.Button size="md">
    <ConsentDialogTrigger.Icon icon="settings" />
    <ConsentDialogTrigger.Text>Privacy</ConsentDialogTrigger.Text>
  </ConsentDialogTrigger.Button>
</ConsentDialogTrigger.Root>
```

* `ConsentDialogTrigger.Root` — Portal wrapper with drag handling and position persistence
* `ConsentDialogTrigger.Button` — Draggable button element with size variants
* `ConsentDialogTrigger.Icon` — Icon display (branding, fingerprint, settings, or custom)
* `ConsentDialogTrigger.Text` — Optional text label

## Props

### ConsentDialogTrigger

|Property|Value|
|:--|:--|
|Type Name|\`ConsentDialogTriggerProps\`|
|Source Path|\`./packages/react/src/components/consent-dialog-trigger/types.ts\`|

\*ExtractedTypeTable: Could not extract "ConsentDialogTriggerProps" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

### ConsentDialogTriggerToolbar

|Property|Value|
|:--|:--|
|Type Name|\`ConsentDialogTriggerToolbarProps\`|
|Source Path|\`./packages/react/src/components/consent-dialog-trigger/types.ts\`|

\*ExtractedTypeTable: Could not extract "ConsentDialogTriggerToolbarProps" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

### Toolbar Actions

|Property|Value|
|:--|:--|
|Type Name|\`ConsentDialogTriggerToolbarAction\`|
|Source Path|\`./packages/react/src/components/consent-dialog-trigger/types.ts\`|

\*ExtractedTypeTable: Could not extract "ConsentDialogTriggerToolbarAction" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

### Preferences Action

|Property|Value|
|:--|:--|
|Type Name|\`ConsentDialogTriggerToolbarPreferences\`|
|Source Path|\`./packages/react/src/components/consent-dialog-trigger/types.ts\`|

\*ExtractedTypeTable: Could not extract "ConsentDialogTriggerToolbarPreferences" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*