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

| Property         | Type                                              | Description                                                                                                   | Default                 | Required |
| :--------------- | :------------------------------------------------ | :------------------------------------------------------------------------------------------------------------ | :---------------------- | :------: |
| icon             | TriggerIcon                                       | Icon to display in the trigger button.                                                                        | 'branding'              | Optional |
| defaultPosition  | any                                               | Default corner position for the trigger.&#xA;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 |