---
title: ConsentDialogLink
description: Add a footer button or link that reopens the c15t preference dialog
  or the IAB TCF preference center on an Astro site, with no JavaScript of its
  own.
group: frameworks
lastModified: "2026-10-10T16:01:45+01:00"
---
## Add the link to your footer

Put one `ConsentDialogLink` in your footer, so visitors can change their
choice at any time. Its children are the label:

```astro title="src/layouts/base.astro"
---
import { ClientRouter } from 'astro:transitions';
import {
	ConsentBanner,
	ConsentDialog,
	ConsentDialogLink,
	ConsentScript,
} from 'c15t/astro/components';

interface Props {
	title: string;
}

const { title } = Astro.props;
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1" name="viewport" />
		<title>{title}</title>
		<ConsentScript />
		<ClientRouter />
	</head>
	<body>
		<slot />
		<footer>
			<ConsentDialogLink>Privacy settings</ConsentDialogLink>
		</footer>
		<ConsentBanner />
		<ConsentDialog />
	</body>
</html>
```

`ConsentDialogLink` renders a plain `<button>` or `<a>` with no styles of
its own. It carries `data-c15t-action="customize"`, and the same shared
listener the banner uses opens the dialog on click.

## Props

|Prop|Type|Default|Effect|
|--|--|--|--|
|`kind`|`'preferences' \|'iab'`|`'preferences'`|Which dialog to open|
|`as`|`'button' \|'a'`|`'button'`|Renders a `<button type="button">`, or an `<a href="#c15t-preferences">`|
|`class`|`string`|None|Class names for your own styles|

Use `as="a"` when your footer styles links and not buttons. The click handler
cancels the link's navigation, so the page does not jump.

## When the link is hidden

The link renders with the `hidden` attribute while there is nothing to
manage:

* No policy is resolved yet, or the backend request failed.
* The resolved rule has `prompt: 'none'` and no rights, so it owes no consent
  interface.

The browser removes `hidden` as soon as a later `/init` answer supplies a rule
that owes one, and adds it back if the rule stops owing one.

If your own CSS sets `display` on the link, keep `[hidden]` hidden too, for
example with `.footer-link[hidden] { display: none; }`.

## Open the IAB preference center

With an IAB TCF policy, set `kind="iab"`:

```astro title="src/layouts/iab.astro (partial)"
<ConsentDialogLink kind="iab">Privacy settings</ConsentDialogLink>
```

The page needs `IABConsentDialog` for `kind="iab"`, and `ConsentDialog` for
the default kind. See [IAB TCF](/docs/frameworks/astro/iab).

## Accessibility

The link is a real `<button>` or `<a>`, so it is reachable with Tab and
activates with Enter. Give it a label that says what it opens, such as
"Cookie preferences" or "Privacy settings". Keyboard focus or a hover on a
link for the preference dialog starts downloading it, so by the time the
visitor presses Enter the dialog is usually ready.

## Open a dialog from your own control

A control that is not a `ConsentDialogLink` can open the dialog with
`openDialog()` from `c15t/astro/client`. See
[open and close dialogs](/docs/frameworks/astro/client-api#open-and-close-dialogs).

## Next steps

* [ConsentDialog](/docs/frameworks/astro/components/consent-dialog) is the
  dialog this link opens.
* [Verify consent](/docs/guides/verify-consent) checks that preferences reopen
  after a choice.