# salla-cookies-bar (https://docs.salla.dev/twilight/react/web-components/salla-cookies-bar)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A cookie consent bar fixed to the bottom of the page. Add it once to the theme layout.
It first shows a message with "Accept All" and "Customize" buttons; "Customize" opens a panel
where the visitor toggles performance, functional and advertising cookies (essential cookies are always on).
The choice is stored in cookies and in `salla.storage` (`cookies-consent`), the bar stays hidden
once a choice exists, and for signed-in customers the choice is also sent to the server.
When a category is declined, known first-party tracking cookies of that category are deleted.
A `salla-menu` with `source="footer"` and `with-cookie-preferences` gets a "cookies settings" link that reopens the bar,
if the store has the `website-cookies` feature.

It emits `salla-cookies-bar::accepted` and `salla-cookies-bar::rejected` through `salla.event`
(no payload), and listens for `salla-cookies-bar::open` to show the bar again.
The preferences panel has a close button (aria-label is the panel title) that rejects all optional cookies,
and each toggle is a checkbox with an aria-label.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-cookies-bar>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaCookiesBar } from '@salla.sa/twilight-components-react/cookies-bar';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaCookiesBar } from '@salla.sa/twilight-components-react/cookies-bar';

export function Example() {
  useEffect(() => {
    salla.event.on('salla-cookies-bar::accepted', () => console.log('cookies accepted'));
    // Show the bar again, for example from a custom footer link
    document.querySelector('salla-cookies-bar').open();
  }, []);

  return (
    <SallaCookiesBar />
  );
}
```

```html
<salla-cookies-bar></salla-cookies-bar>
<script>
  salla.event.on('salla-cookies-bar::accepted', () => console.log('cookies accepted'));
  // Show the bar again, for example from a custom footer link
  document.querySelector('salla-cookies-bar').open();
</script>
```

## Methods [#methods]

Call these on the element or a React ref.

### `accept() => Promise<HTMLElement | undefined>` [#accept--promisehtmlelement--undefined]

Accept all cookie categories, store the choice, hide the bar and emit `salla-cookies-bar::accepted`.

Returns `Promise<HTMLElement>`: A promise that resolves to the component's host element.

### `open() => Promise<HTMLElement | undefined>` [#open--promisehtmlelement--undefined]

Show cookies settings bar to allow updating consent. Always opens on the initial
consent step, same as first load — the customer picks "customize" to reach the
per-category panel.

Returns `Promise<HTMLElement>`: A promise that resolves to the component's host element.

### `reject() => Promise<HTMLElement | undefined>` [#reject--promisehtmlelement--undefined]

Reject all optional cookie categories (only essential cookies stay on), store the choice, hide the bar
and emit `salla-cookies-bar::rejected`.

Returns `Promise<HTMLElement>`: A promise that resolves to the component's host element.

## Related [#related]

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button).