Internationalization

Making use of the header prop in CookieBanner, CookieSelection and GranularCookieSelection allows you to pass props to the standard header atom to change the text and links that are rendered by default, so you can update the copy for internationalization or marketing purposes. You’ll note that CookieSelection and GranularCookieSelection use share the CookieSelectionDefaultHeader atom as their default.

You can then further make use of the props provided by the molecules themselves to modify button labels.

A full example might look like this:


<CookiePreferences>
    <CookieBanner
        header={
            <CookieBannerDefaultHeader primaryText="Some updated copy" />
        }
        configureButtonLabel="Custom configure"
        allowAllButtonLabel="Custom accept"
        onAcceptEverything={() => { ... }}
    />
    <CookieSelection
        saveButtonLabel="Custom save"
        closeButtonLabel="Custom close"
        header={
            <CookieSelectionDefaultHeader selectionTitle="A custom title" />
        }
        cookies={cookies}
        hasGranularCookies={true}
        onPreferencesChosen={(chosenCookies) => { ... }}
    />
    <GranularCookieSelection
        saveButtonLabel="Custom granular save"
        closeButtonLabel="Custom granular close"
        header={
            <CookieSelectionDefaultHeader selectionTitle="Vendors list custom title" />
        }
        cookieGroups={granularCookieGroups}
        cookies={granularCookies}
        onPreferencesChosen={(chosenCookies) => { ... }}
    />
</CookiePreferences>