# SizeGuide (SwiftUI)

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

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

*Component* · `TryYourSize (Swift)`

The "Size guide" button: "Size guide" → "Calculating your size…" → "Your size: M". A tap opens the window. It takes the SwiftUI font and colour of where you put it.

```swift
public init(client: TryYourSize, product: String, variant: Variant = .link, label: String? = nil,
    onRecommendation: ((Recommendation) -> Void)? = nil)
```

## Parameters

- **`client`** (`TryYourSize`, required): Your client.
- **`product`** (`String`, required): Your product ID or SKU.
- **`variant`** (`Variant`, optional, default `.link`): `.link` (link-sized text with the mark, 44 pt hit area) or `.button` (a small bordered button).
- **`label`** (`String?`, optional, default `nil`): your own words instead of "Size guide".
- **`onRecommendation`** (`((Recommendation) -> Void)?`, optional, default `nil`): the shopper's recommended size, on appear and on every change (sizes only).

## Example

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

**Flutter**

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