Skip to main content

Consent Banner

Pattern
Live

The Consent Banner pattern helps users make informed choices about their data privacy by clearly presenting cookie and tracking preference.

Figma(opens in new window)Code(opens in new window)

Usage​

Consent Banners inform users about data collection practices and allow them to accept, reject, or customise their preferences. They support legal compliance (e.g., GDPR, CCPA) and build trust by offering transparency and control.

The Consent Banner should be shown across all pages when the users access these site or service until they have accepted by selecting the call to action button or close button.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { ConsentBanner } from "@iag/chroma-react-ui.components";

When to use​

Use Consent Banners when:

  • Your site or app uses cookies or tracking technologies that require user consent.

  • You need to comply with privacy regulations like GDPR, ePrivacy Directive, or CCPA.

  • Launching a new product or feature that introduces new types of data collection.

  • Users are visiting from regions with strict privacy laws (e.g., EU, UK, California).

When to avoid​

Avoid using Consent Banners when:

  • Your site does not use cookies or tracking technologies that require consent.

  • Consent is already managed through another integrated platform or system-wide banner.

  • The banner would duplicate an existing consent mechanism (e.g., native app permissions).

  • You’re displaying it in a context where it would block critical content or functionality (e.g., during onboarding modals).

Do

  • Do ensure your copy complies with legal.
  • Do provide clear, concise language so users understand their interactions are accepting consent.
  • Do set an appropriate time limit to save users preference data and only show again once this time limit has expired.

Don't

  • Don’t hide the banner behind modals or overlays.
  • Don’t use vague or misleading language (e.g., “By using this site, you agree…”).
  • Don’t assume consent through scrolling or inactivity.