---
title: ConsentDialogTrigger
description: A floating, draggable button that lets users re-open the consent dialog at any time.
---
`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`:

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

// Standalone
<ConsentDialogTrigger />

// Via ConsentDialog
<ConsentDialog showTrigger />
```

For inline footer links (instead of a floating button), use [`ConsentDialogLink`](/docs/frameworks/react/components/consent-dialog-link).

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

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

### ConsentDialogTriggerProps

|Property|Type|Description|Default|Required|
|:--|:--|:--|:--|:--:|
|icon|TriggerIcon|Icon to display in the trigger button.|'branding'|Optional|
|defaultPosition|CornerPosition \|undefined|Default corner position for the trigger. User can drag to any corner and the position will be remembered.|'bottom-right'|Optional|
|persistPosition|boolean \|undefined|Whether to persist the user's position preference in localStorage.|true|Optional|
|ariaLabel|string \|undefined|Accessible label for the trigger button.|'Open privacy settings'|Optional|
|className|string \|undefined|Additional CSS class names.|-|Optional|
|noStyle|boolean \|undefined|When true, removes default styling.|false|Optional|
|showWhen|TriggerVisibility \|undefined|Controls when the trigger is visible.|'always'|Optional|
|size|TriggerSize \|undefined|Size of the trigger button.|'md'|Optional|
|onClick|(() => void) \|undefined|Callback fired when the trigger is clicked (before opening dialog).|-|Optional|
|onPositionChange|((position: CornerPosition) => void) \|undefined|Callback fired when the corner position changes.|-|Optional|