c15t
Deploy on Inth

SvelteKit Components

ConsentButton

ConsentButton is a button that performs one consent action, styled like the banner's buttons. Use it on a cookie policy page, an onboarding step or anywhere visitors should accept, reject or open preferences outside the banner:

src/lib/cookie-choices.svelte
<script lang="ts">
	import { ConsentButton, ConsentDialog } from '@c15t/svelte';
</script>

<section aria-labelledby="cookie-choices">
	<h2 id="cookie-choices">Cookie choices</h2>
	<ConsentButton action="accept-consent" variant="primary" mode="filled">
		Accept all
	</ConsentButton>
	<ConsentButton action="reject-consent">Reject optional</ConsentButton>
	<ConsentButton action="open-consent-dialog" mode="ghost">
		Choose cookies
	</ConsentButton>
</section>
<ConsentDialog />

Render it inside ConsentProvider. A button with action="open-consent-dialog" needs a mounted ConsentDialog.

Props

ConsentButton also passes any <button> attribute through, such as id, disabled or aria-describedby.

PropTypeDefaultBehavior
actionsee belowrequiredWhat the click does.
categoryAllConsentNamesnoneThe category set-consent switches on.
variant'primary' or 'neutral''neutral'Color emphasis.
mode'filled', 'stroke', 'lighter' or 'ghost''stroke'Fill style.
size'medium', 'small', 'xsmall' or 'xxsmall''small'Button size.
closeConsentBanner, closeConsentDialogbooleanfalseClose both surfaces after dismiss-notice.
noStylebooleanprovider's noStyleDrops c15t's classes.
classstringnoneExtra class.
onclick(event: MouseEvent) => voidnoneRuns first. Call event.preventDefault() to skip the action.
childrenSnippetnoneThe label.
actionEffect
accept-consentRecords every category in scope as allowed.
reject-consentRecords only necessary, rejecting the rest.
custom-consentRecords the current draft, as the dialog's save button does.
dismiss-noticeRecords that the visitor dismissed a notice. Not a grant.
open-consent-dialogOpens the preference dialog.
set-consentSwitches category on in the unsaved draft. Nothing is recorded until a save.

Behavior

Accept, reject and save record the choice in the same task as the click, and the banner or dialog that showed closes. The backend request runs after. A failed request is reported through the provider's onError callback and retried; the click handler does not throw. A save refused because the policy changed keeps the dialog open for review.

A button with open-consent-dialog starts loading the dialog chunk in idle time while mounted, and on hover or focus.

Accessibility

ConsentButton renders <button type="button"> with its children as the accessible name. Write labels that say what happens: "Accept all" records a choice, "Choose cookies" opens preferences. Do not label a notice dismissal "Accept". Copy and translations has more guidance.

Style the button

The button uses c15t's button classes and the buttonPrimary or buttonSecondary theme slot, by variant. It carries data-variant, data-mode and data-size for CSS. With noStyle, it renders with only your class and none of those attributes.