# <SizeGuide>

> The native "Size guide" button: "Size guide" → "Calculating your size…" → "Your size: M".

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

*Component* · `@tryyoursize/react-native`

The native "Size guide" button: "Size guide" → "Calculating your size…" → "Your size: M".

```ts
function SizeGuide({ product, variant = "link", label, style, onRecommendation }: SizeGuideProps)
```

## Props

- **`product`** (`string`, required)
- **`variant`** (`"link" | "button"`, optional): "link" (default): link-sized text with the mark. "button": a small bordered button.
- **`label`** (`string`, optional): Your own words instead of "Size guide".
- **`style`** (`StyleProp<ViewStyle>`, optional)
- **`onRecommendation`** (`(r: Recommendation) => void`, optional): The shopper's recommended size, on show and on every change (sizes only).

## Example

**React Native**

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

**Swift**

```swift
// SwiftUI, where your "Size guide" link was
SizeGuide(client: tys, product: "SKU-123") { rec in
    if rec.status == .ready, !touched { selectedSize = rec.size }
}
```

**Kotlin**

```kotlin
// Compose, where your "Size guide" link was
SizeGuide(tys, "SKU-123", textStyle = MaterialTheme.typography.bodyMedium) { rec ->
    if (rec.status == Recommendation.Status.READY && !touched) selected = rec.size
}
```

**Flutter**

```dart
const SizeGuide(product: 'SKU-123') // listen to tys.onRecommendation to preselect
```