# salla-product-size-guide (https://docs.salla.dev/twilight/react/web-components/salla-product-size-guide)



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

A modal that shows the size guides of a product, one tab per guide, loaded from the store when it opens.
Use it on a product page next to a "Size guide" link. Place one `salla-product-size-guide` in the page, then open it with the `open()` method or by emitting the `size-guide::open` event through `salla.event` with the product id as the argument.
If loading fails, the modal shows a message instead of tabs. Keyboard and focus behaviour comes from the inner `salla-modal`.

## Use it [#use-it]

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

```tsx
import { SallaProductSizeGuide } from '@salla.sa/twilight-components-react/product-size-guide';
```

**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 { SallaProductSizeGuide } from '@salla.sa/twilight-components-react/product-size-guide';

export function Example() {
  return (
    <>
      <SallaProductSizeGuide />
      <button onClick={() => document.querySelector('salla-product-size-guide').open(123456)}>Size guide</button>
    </>
  );
}
```

```html
<salla-product-size-guide></salla-product-size-guide>
<button onclick="document.querySelector('salla-product-size-guide').open(123456)">Size guide</button>
```

## Methods [#methods]

Call these on the element or a React ref.

### `close() => Promise<HTMLElement>` [#close--promisehtmlelement]

Closes the size-guide modal.

Returns `Promise<HTMLElement>`: A Promise that resolves to the inner modal element.

### `open(product_id: number) => Promise<any>` [#openproduct_id-number--promiseany]

Opens the size-guide modal, then loads and shows the size guides of the product.

| Parameter    | Type     | Description                                  |
| ------------ | -------- | -------------------------------------------- |
| `product_id` | `number` | ID of the product whose size guides to show. |

Returns `Promise<any>`: A Promise that resolves when the loading has finished (successfully or with an error shown in the modal), with no value.

## Slots [#slots]

| Slot     | Description                                                                 |
| -------- | --------------------------------------------------------------------------- |
| `footer` | Content shown at the bottom of the modal, after the tabs. Empty by default. |
| `header` | Content shown at the top of the modal, before the tabs. Empty by default.   |

## Related [#related]

Renders: [`<salla-placeholder>`](https://docs.salla.dev/twilight/react/web-components/salla-placeholder), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton), [`<salla-tabs>`](https://docs.salla.dev/twilight/react/web-components/salla-tabs), [`<salla-tab-header>`](https://docs.salla.dev/twilight/react/web-components/salla-tab-header), [`<salla-tab-content>`](https://docs.salla.dev/twilight/react/web-components/salla-tab-content).