C15T Logo

Cookie Banner

A customizable cookie consent banner that handles privacy compliance with zero configuration required.

The Cookie Banner component provides an elegant way to obtain and manage consent from your users. It handles all the complexity of privacy regulations while providing a smooth user experience that integrates naturally with your application.

Usage

The Cookie Banner uses a compound component pattern, giving you complete control over its structure when needed. Think of it like building blocks – you can use the pre-assembled version, or arrange the pieces yourself for custom layouts.

import { ConsentManagerProvider, CookieBanner } from "@c15t/react";

export default function App() {
  return (
    <ConsentManagerProvider options={{
      mode: 'c15t',
      backendURL: 'https://your-instance.c15t.dev',
      consentCategories: ['necessary', 'marketing'],
    }}>
      <CookieBanner /> 
    </ConsentManagerProvider>
  );
};

You can display legal links (like Privacy Policy or Cookie Policy) inline with the banner description. Legal links are rendered inline with the description text, styled as links with commas separating multiple links.

First, configure your legal links in the ConsentManagerProvider:

<ConsentManagerProvider
  options={{
    legalLinks: {
      privacyPolicy: {
        href: '/privacy',
        label: 'Privacy Policy',
      },
      cookiePolicy: {
        href: '/cookies',
        label: 'Cookie Policy',
      },
      termsOfService: {
        href: '/terms',
        label: 'Terms of Service',
      },
    },
  }}
>
  <CookieBanner />
</ConsentManagerProvider>

By default, the Cookie Banner shows no legal links. To display them, pass the legalLinks prop with an array of the link keys you want to show:

// Show no legal links (default)
<CookieBanner />

// Show privacy policy and cookie policy
<CookieBanner legalLinks={['privacyPolicy', 'cookiePolicy']} />

// Show only terms of service
<CookieBanner legalLinks={['termsOfService']} />

Legal links appear inline with the description text. For example, if your description is "We use cookies to enhance your experience", it will render as: "We use cookies to enhance your experience Privacy Policy, Cookie Policy" where the links are styled in blue and underlined on hover.

Styling

The Cookie Banner is designed to adapt to your application's visual style. Learn more about our styling system.

Theme Variables

These keys are available on the theme object to customize your banner.

Property
Types

Scroll Locking

The Cookie Banner supports scroll locking, a technique that prevents users from interacting with your website until they've made a cookie consent choice.

<CookieBanner lockScroll={true} />

When enabled, scroll locking:

  • Prevents page scrolling and interaction
  • Displays a background overlay
  • Ensures users must make a privacy choice before accessing content

For best results, use scroll locking together with focus trapping to ensure complete keyboard accessibility.

Info

For detailed implementation guides, best practices, and compliance considerations, see our Scroll Locking Guide.

Accessibility

The Cookie Banner is built with accessibility in mind:

  • Proper ARIA roles and labels (role="dialog", aria-modal="true")
  • Keyboard navigation and interaction support
  • Focus management and trapping
  • Screen reader announcements
  • Semantic HTML structure

These features work automatically, ensuring all users can interact with your privacy controls effectively.

Focus Trapping

The Cookie Banner implements focus trapping when it's displayed, which is an essential accessibility feature that prevents keyboard focus from moving outside the banner. This behavior:

  • Ensures users complete the consent flow before interacting with other page elements
  • Prevents accidental interaction with content that shouldn't be accessible yet
  • Helps compliance with accessibility guidelines like WCAG 2.4.3 (Focus Order)

Info

Focus trapping is enabled by default and recommended for accessibility compliance. For more details on implementation and best practices, see our useFocusTrap hook documentation.

Best Practices

Follow these guidelines for optimal implementation:

  1. Place the banner at the root level of your application
  2. Keep the title and description clear and concise
  3. Use the pre-assembled version unless you need custom layouts
  4. Test the banner across different screen sizes
  5. Ensure your theme maintains sufficient contrast ratios
  6. Consider scroll locking for strict compliance scenarios
  7. Test with keyboard navigation to ensure accessibility

API Reference

CookieBanner

The main component accepts these props:

Property
Types

Compound Components

Property
Types