CookieBanner

Default

Svelte code

<script>
	import { CookieBanner } from '@danboscaro/govuk-svelte'
</script>

<CookieBanner {...{
  messages: [
    {
      headingText: "Cookies on this government service",
      text: "We use analytics cookies to help understand how users use our service.",
      actions: [
        {
          text: "Accept analytics cookies",
          type: "submit",
          name: "cookies",
          value: "accept"
        },
        {
          text: "Reject analytics cookies",
          type: "submit",
          name: "cookies",
          value: "reject"
        },
        {
          text: "View cookie preferences",
          href: "/cookie-preferences"
        }
      ]
    }
  ]
}} />

Accepted confirmation banner

Svelte code

<script>
	import { CookieBanner } from '@danboscaro/govuk-svelte'
</script>

<CookieBanner {...{
  messages: [
    {
      text: "Your cookie preferences have been saved. You have accepted cookies.",
      role: "alert",
      actions: [
        {
          text: "Hide cookie message",
          type: "button"
        }
      ]
    }
  ]
}} />

Rejected confirmation banner

Svelte code

<script>
	import { CookieBanner } from '@danboscaro/govuk-svelte'
</script>

<CookieBanner {...{
  messages: [
    {
      text: "Your cookie preferences have been saved. You have rejected cookies.",
      role: "alert",
      actions: [
        {
          text: "Hide cookie message",
          type: "button"
        }
      ]
    }
  ]
}} />

ClientSide implementation

Svelte code

<script>
	import { CookieBanner } from '@danboscaro/govuk-svelte'
</script>

<CookieBanner {...{
  messages: [
    {
      headingText: "Cookies on this service",
      text: "We use cookies to help understand how users use our service.",
      actions: [
        {
          text: "Accept analytics cookies",
          type: "submit",
          name: "cookies",
          value: "accept"
        },
        {
          text: "Reject analytics cookies",
          type: "submit",
          name: "cookies",
          value: "reject"
        },
        {
          text: "View cookie preferences",
          href: "/cookie-preferences"
        }
      ]
    },
    {
      text: "Your cookie preferences have been saved. You have accepted cookies.",
      role: "alert",
      hidden: true,
      actions: [
        {
          text: "Hide cookie message",
          type: "button"
        }
      ]
    },
    {
      text: "Your cookie preferences have been saved. You have rejected cookies.",
      role: "alert",
      hidden: true,
      actions: [
        {
          text: "Hide cookie message",
          type: "button"
        }
      ]
    }
  ]
}} />

With html

Svelte code

<script>
	import { CookieBanner } from '@danboscaro/govuk-svelte'
</script>

<CookieBanner {...{
  messages: [
    {
      headingHtml: "Cookies on <span>my service</span>",
      html: "<p class=\"govuk-body\">We use cookies in <span>our service</span>.</p><p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>",
      actions: [
        {
          text: "Accept analytics cookies",
          type: "submit",
          name: "cookies",
          value: "accept"
        },
        {
          text: "Reject analytics cookies",
          type: "submit",
          name: "cookies",
          value: "reject"
        },
        {
          text: "View cookie preferences",
          href: "/cookie-preferences"
        }
      ]
    }
  ]
}} />