Superpositions

Bandeau de consentement

شريط الموافقة على الكوكيزConsent banner

Stablesrc/dsm/components/consent-banner.tsx
La demande de consentement aux cookies, ancrée en bas de la fenêtre. Trois actions à poids égal aux yeux du visiteur : tout accepter, tout refuser, ou personnaliser.

Import

import { ConsentBanner } from "@/dsm/components/consent-banner";

Exemples

Bandeau de consentement

Rendu ici dans un cadre relatif pour ne pas recouvrir la page de documentation.

LTR

Aperçu contenu dans un cadre pour ne pas recouvrir le reste de la page — en usage réel, le bandeau est fixé au coin de la fenêtre.

Usage

Quand l'utiliser

  • Affichez-le une seule fois par visite, avant tout dépôt de traceur non essentiel.
  • Utilisez `defaultOpen` pour un usage non contrôlé, ou `open`/`onAccept`/`onRefuse`/`onCustomise` pour piloter l'état depuis un gestionnaire de consentement existant.

Quand ne pas l'utiliser

  • Ne bloquez pas l'accès au contenu de la page derrière ce bandeau : il reste non modal, l'utilisateur doit pouvoir continuer à lire pendant qu'il décide.

Accessibilité & langues

Accessibilité

  • Le bandeau porte `role="dialog"` et `aria-labelledby`, relié à son titre.
  • Les trois actions sont des boutons de même taille, dans un ordre de lecture cohérent (accepter, refuser, personnaliser) : aucune n'est mise en avant par un piège visuel.

RTL & multilingue

  • Le bandeau est ancré en fin de ligne (`end-6`) à partir du format `sm`, à gauche en arabe, à droite en français.

Propriétés

ConsentBanner
PropriétéTypeDéfautDescription
openboolean—État ouvert, en mode contrôlé.
defaultOpenbooleantrueÉtat initial, en mode non contrôlé.
onAccept() => void—Appelé au clic sur « Tout accepter ».
onRefuse() => void—Appelé au clic sur « Tout refuser ».
onCustomise() => void—Appelé au clic sur « Personnaliser » (n'referme pas le bandeau lui-même).

Composants liés