# <SizeGuide>

> A link-sized "Size guide" with the TryYourSize mark, for the spot next to your size picker.

Source: https://docs.tryyoursize.com/reference/react/size-guide/

*Component* · `@tryyoursize/react`

A link-sized "Size guide" with the TryYourSize mark, for the spot next to your size picker. Shows "Your size: M" when the shopper is connected.

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

```ts
SizeGuide: ForwardRefExoticComponent<SizeGuideProps & RefAttributes<ElementHandle>>
```

## Props

- **`variant`** (`"link" | "button"`, optional): A text link (default) or an outlined button.
- **`label`** (`string`, optional): Your own words for "Size guide" (otherwise localized).

## Example

**React**

```tsx
<SizeGuide
  product="SKU-123"
  variant="link"
  onRecommendation={(r) => r.status === "ready" && !touched && setSize(r.size!)}
/>
```

**JavaScript**

```js
elements.create("sizeGuide", { product: "SKU-123", variant: "link" }).mount("#size-guide");
```

**HTML**

```html
<tys-size-guide publishable-key="pk_test_…" product="SKU-123"></tys-size-guide>
```