Preferences

Select sections

<Banner
  isOpen
  preferencesSections={['essential', 'analytics', 'marketing']}
  preferencesContent={{ essential: { title: 'Required cookies' } }}
/>

preferencesSections controls order and visibility. Overrides alone do not add sections. The default list is Essential, Analytics and Marketing; [] displays no sections.

Each preferencesContent entry accepts title, text, checked and disabled. Omitted fields retain defaults. Explicit false is respected; text: '' hides a description. Blank titles fall back to a meaningful built-in title or the custom ID.

IDs are case-sensitive. Empty IDs are omitted and duplicates appear once. Provide a localized title for a custom ID:

<Banner
  isOpen
  preferencesSections={['essential', 'personalization']}
  preferencesContent={{ personalization: {
    title: 'Personalization',
    text: 'Remember optional display preferences.',
  } }}
/>

Retain applied choices

Store applied values in your application and pass them back as checked overrides, as shown in the quickstart. Handle Accept and Reject for your chosen category IDs as well as Apply.

Hide the preferences trigger

showCustomizePreferences={false} removes the collapsed banner's preferences trigger. It does not close an already open preferences view. Ensure your application still offers the controls your integration requires.

The floating preferences button is independent of this setting. It is enabled by default while isOpen is false; disable it with showFloatingButton={false}. To use it, handle floating-button open and close requests in onMsg by updating isOpen. See the event reference.

Migrate earlier prototypes

Earlier content becomes bannerContent. Replace a section array with preferencesSections IDs and keyed preferencesContent overrides. Replace on_open_settings and on_close_settings with on_open_preferences and on_close_preferences. Update props, imported types and exhaustive handlers together; old names are not aliases.