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

Property

Types

Loading…

ConsentDialogTrigger

Basic Usage

Icon Options

Visibility

Position

Size

Compound Components

Props

ariaLabel?Accessible label for the trigger button.string | undefined

className?Additional CSS class names.string | undefined

defaultPosition?Default corner position for the trigger. User can drag to any corner and the position will be remembered.CornerPosition | undefined

icon?Icon to display in the trigger button.TriggerIcon

noStyle?When true, removes default styling.boolean | undefined

onClick?Callback fired when the trigger is clicked (before opening dialog).(() => void) | undefined

onPositionChange?Callback fired when the corner position changes.((position: CornerPosition) => void) | u...

persistPosition?Whether to persist the user's position preference in localStorage.boolean | undefined

showWhen?Controls when the trigger is visible.TriggerVisibility | undefined

size?Size of the trigger button.TriggerSize | undefined