ConsentDialogTrigger

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.

Basic Usage

Use standalone or via the showTrigger prop on ConsentDialog:

import { ConsentDialogTrigger } from '@c15t/react';

// Standalone
<ConsentDialogTrigger />

// Via ConsentDialog
<ConsentDialog showTrigger />

For inline footer links (instead of a floating button), use ConsentDialogLink.

Icon Options

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

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

Visibility

Control when the trigger is visible:

{
  /* 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:

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

Size

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

Compound Components

Build fully custom trigger layouts using sub-components:

<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

AutoTypeTable Error

No type data generated. Verify the path/name and ensure the file is readable from the configured basePath.

Path: ./packages/react/src/components/consent-dialog-trigger/types.ts

Name: ConsentDialogTriggerProps