---
title: ConsentDialogLink
description: Let visitors reopen c15t preferences from a SvelteKit layout footer
  with ConsentDialogLink, rendered in server HTML when the policy offers
  preferences.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Reopen preferences from your footer

`ConsentDialogLink` is an unstyled button that opens the preference dialog.
Put it in the root layout's footer, so it is on every page:

```svelte title="src/routes/+layout.svelte"
<script lang="ts">
	import { posthog } from '@c15t/integrations/posthog';
	import {
		ConsentBanner,
		ConsentDialog,
		ConsentDialogLink,
		ConsentRoot,
	} from '@c15t/svelte';

	let { children, data } = $props();

	const scripts = [
		posthog({
			id: 'phc_your_project_key',
			initOptions: { cookieless_mode: 'never' },
			loadMode: 'after-consent',
		}),
	];
</script>

<ConsentRoot state={data.consent} {scripts}>
	{@render children()}
	<footer>
		<ConsentDialogLink>Privacy settings</ConsentDialogLink>
	</footer>
	<ConsentBanner />
	<ConsentDialog />
</ConsentRoot>
```

It needs `ConsentDialog` mounted in the same provider. With server-resolved
consent, the link is in the server HTML. Without one, such as on a
prerendered page, it appears after hydration once the policy resolves.

## Props

`ConsentDialogLink` takes its label as children and passes every other
attribute, such as `class`, `id` or `aria-describedby`, to the `<button>` it
renders.

|Prop|Type|Default|Behavior|
|--|--|--|--|
|`children`|`Snippet`|required|The visible label, such as "Privacy settings".|
|`noStyle`|`boolean`|`true`|Unstyled by default so it matches your footer links. Set `false` for c15t's button style.|
|`onclick`|`(event: MouseEvent) => void`|none|Runs before the dialog opens. Call `event.preventDefault()` to stop it opening.|
|any button attribute|||Passed to the `<button>`.|

There is no `asChild`. To style it like your links, give it the same class,
and reset the button's border, background and padding in that class.

## Behavior

* The link renders only when the policy offers a way to change preferences:
  a prompt or a visitor right. Visitors in a
  region with no consent law and no rights see no link.
* A click sets the active surface to `'dialog'`. It needs a mounted
  `ConsentDialog` in the same provider to show anything.
* It starts loading the dialog chunk in browser idle time while mounted, and
  on hover or focus. See [ConsentDialog](./consent-dialog#how-the-dialog-loads).

## Accessibility

The link is a `<button type="button">`, so keyboard users reach it with Tab
and activate it with Enter or Space. Its accessible name is its text. Keep the
text specific, such as "Privacy settings" or "Cookie preferences", rather
than "Click here".

## Style the link

The button carries `data-testid="consent-dialog-link"` and
`data-c15t-rights` with the rights the policy grants, separated by spaces.
Style it with your own class; with `noStyle` on, c15t adds no classes.