The CookieNotice component displays a banner or dialog to inform users about cookie usage and collect consent.
It helps your site comply with privacy regulations like GDPR and CCPA.

• Banner or dialog: Can appear at the bottom, top, or as a modal.
• Customizable actions: Accept or decline buttons.
• Interactive: Open, close, or toggle programmatically.
• Flexible content: Include text, links, or other interactive elements.

Usage Example

Preview

Open

🍪 We use cookies

We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.

Decline Accept

Code

<script lang="ts">
  import { Button, Drawer } from "@fefade-ui/svelte"
  import { onMount } from "svelte"

  let isOpen = $state(false)

  function handleOpen() {
    isOpen = !isOpen
  }

  function handleClose() {
    isOpen = false
  }

  onMount(() => {
    isOpen = true
  })
</script>

<Button onclick={handleOpen}>Open</Button>

<Drawer
  {isOpen}
  position="bottom"
  style="
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  "
>
  <Drawer.Header>
    <strong>🍪 We use cookies</strong>
  </Drawer.Header>
  <Drawer.Content style="max-width: 500px; gap: 0.5rem;">
    <p>
      We use cookies to enhance your experience. By continuing to visit this
      site you agree to our use of cookies.
    </p>
    <Button variant="outlined" onclick={handleClose}>Decline</Button>
    <Button>Accept</Button>
  </Drawer.Content>
</Drawer>

Props

Prop / Slot	Type	Default	Description
isOpen	boolean	false	Controls whether the notice is visible.
Drawer.Header	component	Optional	Header content of the notice (e.g., title or emoji).
Drawer.Content	component	Optional	Main content of the notice (text, buttons, links).
Button	component	Optional	Action buttons to accept or decline cookies.

Best Practices

• Show the notice on initial page load to comply with regulations.
• Provide clear accept and decline options for users.
• Keep content concise and readable for better UX.
• Use Drawer or banner positioning to avoid obstructing main content.
• Combine with persistent state to remember user consent across sessions.