SvelteKit Components

ConsentDialogTrigger

Add a floating privacy button

ConsentDialogTrigger is a small round button, fixed to a corner of the viewport, that opens the preference dialog. It keeps preferences one click away on every page without a footer link. Render it next to ConsentDialog:

src/lib/privacy-trigger.svelte

<script lang="ts">
	import { ConsentDialog, ConsentDialogTrigger } from '@c15t/svelte';
</script>

<!-- A floating button in the bottom-left corner that opens preferences.
     Visitors can drag it to another corner; c15t remembers where. -->
<ConsentDialogTrigger defaultPosition="bottom-left" size="sm" />
<ConsentDialog />

Render the component inside ConsentProvider. ConsentDialog's showTrigger prop renders the same button for you, but only after the dialog chunk loads; a separate ConsentDialogTrigger is part of the page from the first render.

Props

Prop	Type	Default	Behavior
`defaultPosition`	`'bottom-right'`, `'bottom-left'`, `'top-right'` or `'top-left'`	`'bottom-right'`	The corner it starts in.
`persistPosition`	`boolean`	`true`	Remembers the corner a visitor drags it to, in local storage.
`showWhen`	`'always'` or `'never'`	`'always'`	`'never'` hides it.
`size`	`'sm'`, `'md'` or `'lg'`	`'md'`	Button size.
`ariaLabel`	`string`	`'Open privacy settings'`	Accessible name. Translate it yourself; it does not come from `i18n`.
`noStyle`	`boolean`	`false`	Drops c15t's classes, including the fixed positioning.
`class`	`string`	none	Extra class on the button.
`onclick`	`(event: MouseEvent) => void`	none	Runs before the dialog opens. Call `event.preventDefault()` to stop it.
`onPositionChange`	`(corner) => void`	none	Runs after a drag moves it to another corner.

Behavior

The button renders only when the policy offers a way to change preferences, and hides while the dialog is open.
Visitors can drag it. On release it snaps to the nearest corner in the direction of the drag. A drag does not open the dialog; a click does.
The icon follows the project's branding.
It is rendered into document.body, so a parent's overflow or transform does not clip it.
It starts loading the dialog chunk in idle time and on hover or focus, like the other buttons that open the dialog.
While ConsentDevTools is mounted, it becomes a two-button toolbar: the preferences button stays in the corner and a DevTools button sits beside it. The DevTools panel opens next to the toolbar instead of from its own launcher. See DevTools.

Accessibility

The trigger is a <button type="button"> with aria-label, since it shows only an icon. Keep the label in the page's language by passing ariaLabel. Dragging needs a pointer; keyboard users activate it with Enter or Space and cannot move it, so pick a defaultPosition that does not cover your own controls.

Style the trigger

The button carries data-testid="consent-dialog-trigger", data-c15t-trigger="true" and data-c15t-rights. Its colors come from the --c15t-* tokens; theme tokens lists them.

Trigger in the server HTML

Rendered in the root layout with server-resolved consent, the trigger is in the server HTML at its default corner. After hydration it moves to document.body and, if the visitor dragged it on an earlier visit, to the saved corner.