# <FitButton>

> A compact "Find my size" button that opens the measuring window.

Source: https://docs.tryyoursize.com/reference/react/fit-button/

*Component* · `@tryyoursize/react`

A compact "Find my size" button that opens the measuring window.

Pass a `ref` to get an [`ElementHandle`](https://docs.tryyoursize.com/reference/react/element-handle.md) (`open()`, `close()`, `getRecommendation()`, `getElement()`).

```ts
FitButton: ForwardRefExoticComponent<ElementProps & RefAttributes<ElementHandle>>
```

## Props

- **`product`** (`string`, required): Your product identifier, as synced to TryYourSize. Changing it updates the element in place.
- **`id`** (`string`, optional)
- **`className`** (`string`, optional)
- **`style`** (`CSSProperties`, optional)
- **`onReady`** (`(e: ElementEvents["ready"]) => void`, optional): The element is shown and connected.
- **`onSize`** (`(e: SizeEvent) => void`, optional): The shopper got a size for this product: preselect the variant.
- **`onOpen`** (`(e: ElementEvents["open"]) => void`, optional)
- **`onClose`** (`(e: ElementEvents["close"]) => void`, optional)
- **`onLoadError`** (`(e: ElementEvents["loaderror"]) => void`, optional): Our window could not be reached (network, CSP).
- **`onRecommendation`** (`(r: Recommendation) => void`, optional): The shopper's recommended size in your size labels: on mount when they are already connected, and on every change. Sizes only. Preselect your picker.

## Example

**React**

```tsx
<FitButton product="SKU-123" onSize={({ size }) => setSize(size)} />
```

**JavaScript**

```js
elements.create("button", { product: "SKU-123" }).mount("#find-my-size");
```