# Parts (/themes/sdk/reference/consent/parts)

```ts
import { … } from '@poltura/theme-sdk/consent';
```

## `ConsentBanner` [#consentbanner]

The cookie banner.

```ts
ConsentBanner(props: ConsentBannerProps): ReactElement | null
```

The merchant composes it in the Cookie banner template, with the accept, reject and settings choices. Shows in the editor while selected or its template is open. A theme's `src/layout/consent.tsx` replaces it and the template.

**Props:** [`ConsentBannerProps`](/themes/sdk/reference/consent/types-1#consentbannerprops)

**Example**

```tsx
import { ConsentBanner } from '@poltura/theme-sdk/consent';

export function QuietBanner() {
  return <ConsentBanner classes={{ title: 'uppercase tracking-wide' }} />;
}
```

**See also:** [`useConsent`](/themes/sdk/reference/consent/hooks#useconsent), [`ConsentPreferences`](/themes/sdk/reference/consent/parts#consentpreferences)

## `ConsentPreferences` [#consentpreferences]

The preferences panel.

```ts
ConsentPreferences(props: ConsentPreferencesProps): ReactElement | null
```

The Cookie preferences template composes its intro; every category shows its table and toggle. The toggles edit a working choice that is stored only by the save button; Escape closes the panel without a change.

**Props:** [`ConsentPreferencesProps`](/themes/sdk/reference/consent/types-1#consentpreferencesprops)

**Example**

```tsx
import { ConsentPreferences } from '@poltura/theme-sdk/consent';

export function Preferences() {
  return <ConsentPreferences classes={{ save: 'font-bold' }} />;
}
```

**See also:** [`useConsent`](/themes/sdk/reference/consent/hooks#useconsent), [`ConsentToggle`](/themes/sdk/reference/consent/parts#consenttoggle)

## `ConsentToggle` [#consenttoggle]

One category's switch.

```ts
ConsentToggle(props: ConsentToggleProps): ReactElement
```

It allows or refuses the category; `necessary` shows as on and cannot change. Inside [`ConsentPreferences`](/themes/sdk/reference/consent/parts#consentpreferences) it edits the panel's working choice; anywhere else it stores the change at once.

**Props:** [`ConsentToggleProps`](/themes/sdk/reference/consent/types-1#consenttoggleprops)

**Example**

```tsx
import { ConsentToggle, useConsent } from '@poltura/theme-sdk/consent';

export function AnalyticsSwitch() {
  const consent = useConsent();
  return (
    <label className='flex items-center gap-3'>
      {consent.categories.find((category) => category.id === 'analytics')?.label}
      <ConsentToggle category='analytics' />
    </label>
  );
}
```

## `ConsentSettingsLink` [#consentsettingslink]

Opens the preferences panel.

```ts
ConsentSettingsLink(props: ConsentSettingsLinkProps): ReactElement
```

The footer's cookie settings link is one.

**Props:** [`ConsentSettingsLinkProps`](/themes/sdk/reference/consent/types-2#consentsettingslinkprops)

**Example**

```tsx
import { ConsentSettingsLink } from '@poltura/theme-sdk/consent';

export function FooterCookieLink() {
  return <ConsentSettingsLink className='text-sm underline' />;
}
```

## `ConsentCookieTable` [#consentcookietable]

The store's cookies.

```ts
ConsentCookieTable(props: ConsentCookieTableProps): ReactElement | null
```

The same rows the preferences panel lists: the store's own cookies and those of its active apps, with their provider, purpose and lifetime in the page language. Each table carries the category's name as its caption; a category without cookies is left out. The merchant places it on a legal page with the Cookie table element.

**Props:** [`ConsentCookieTableProps`](/themes/sdk/reference/consent/types-2#consentcookietableprops)

**Example**

```tsx
import { ConsentCookieTable } from '@poltura/theme-sdk/consent';

export function CookiePolicyTables() {
  return <ConsentCookieTable classes={{ caption: 'text-lg font-semibold' }} />;
}
```

**See also:** [`useConsent`](/themes/sdk/reference/consent/hooks#useconsent), [`ConsentPreferences`](/themes/sdk/reference/consent/parts#consentpreferences)