c15t
Components

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/nextjs';

// 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 />} />

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.

<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:

<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.

<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:

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

ConsentDialogTrigger

Warning: ExtractedTypeTable: Could not extract "ConsentDialogTriggerProps" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…

ConsentDialogTriggerToolbar

Warning: ExtractedTypeTable: Could not extract "ConsentDialogTriggerToolbarProps" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…

Toolbar Actions

Warning: ExtractedTypeTable: Could not extract "ConsentDialogTriggerToolbarAction" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…

Preferences Action

Warning: ExtractedTypeTable: Could not extract "ConsentDialogTriggerToolbarPreferences" from "./packages/react/src/components/consent-dialog-trigger/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…