ConsentBannerDefault

const ConsentBannerDefault: DefineComponent<ExtractPropTypes<{
  branding: {
     default: boolean;
     type: BooleanConstructor;
    };
  cloudEndpoint: {
     default: undefined;
     type: PropType<undefined | string>;
    };
  copy: {
     default: () => {};
     type: PropType<Partial<BannerCopy>>;
    };
  locale: {
     default: undefined;
     type: PropType<undefined | string>;
    };
  policyUrl: {
     default: undefined;
     type: PropType<undefined | string>;
    };
  siteId: {
     default: undefined;
     type: PropType<undefined | string>;
    };
  theme: {
     default: undefined;
     type: PropType<undefined | "light" | "dark">;
    };
 }>, () => VNode<RendererNode, RendererElement, {}>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, ToResolvedProps<ExtractPropTypes<{
  branding: {
     default: boolean;
     type: BooleanConstructor;
    };
  cloudEndpoint: {
     default: undefined;
     type: PropType<undefined | string>;
    };
  copy: {
     default: () => {};
     type: PropType<Partial<BannerCopy>>;
    };
  locale: {
     default: undefined;
     type: PropType<undefined | string>;
    };
  policyUrl: {
     default: undefined;
     type: PropType<undefined | string>;
    };
  siteId: {
     default: undefined;
     type: PropType<undefined | string>;
    };
  theme: {
     default: undefined;
     type: PropType<undefined | "light" | "dark">;
    };
 }>, {}>, {
  branding: boolean;
  cloudEndpoint: undefined | string;
  copy: Partial<BannerCopy>;
  locale: undefined | string;
  policyUrl: undefined | string;
  siteId: undefined | string;
  theme: undefined | "light" | "dark";
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

Defined in: packages/banner-default/src/vue/banner.ts:66

Drop-in styled consent banner for Vue. Mounts only when the headless <ConsentBanner> says it should be open. “Customise” opens a modal with per-category toggles.

Equal-prominence design: Accept All and Reject All use identical button styling. UK ICO and EU EDPB guidance treats unequal visual weight on those buttons as a dark pattern. Customise is rendered as a ghost button so the two consent paths stay symmetrical.

Example

<script setup lang="ts">
import { ConsentBannerDefault } from '@tickboxhq/banner-default/vue'
import config from './consent.config'
</script>
<template>
  <ConsentBannerDefault
    :site-id="config.cloud?.siteId"
    :policy-url="config.policy?.url"
  />
</template>