# SizeGuide

> The compact "Size guide" button, drawn natively: "Size guide" → "Calculating your size…" → "Your size: M".

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

*Component* · `tryyoursize (Dart)`

The compact "Size guide" button, drawn natively: "Size guide" → "Calculating your size…" → "Your size: M". A tap opens the window. Listen to `onRecommendation` to preselect your picker.

```dart
const SizeGuide({
    super.key,
    required this.product,
    this.variant = SizeGuideVariant.link,
    this.label,
    this.width = 220,
  })
```

## Parameters

- **`product`** (`String`, required): Your product ID or SKU.
- **`variant`** (`SizeGuideVariant`, optional, default `SizeGuideVariant.link`): `link` (default) or `button`.
- **`label`** (`String?`, optional): Your own words instead of "Size guide".
- **`width`** (`double`, optional, default `220`): Platform views need a bounded width (default 220).

## Example

**Flutter**

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

**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
}
```

**React Native**

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