# SizeGuide (Compose)

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

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

*Component* · `com.tryyoursize:tryyoursize-android`

The "Size guide" button: "Size guide" → "Calculating your size…" → "Your size: M". A tap opens the window.

```kotlin
@Composable
public fun SizeGuide(
    client: TryYourSize,
    product: String,
    modifier: Modifier = Modifier,
    variant: SizeGuideVariant = SizeGuideVariant.LINK,
    label: String? = null,
    textStyle: TextStyle = TextStyle(fontSize = 15.sp),
    onRecommendation: ((Recommendation) -> Unit)? = null,
)
```

## Parameters

- **`client`** (`TryYourSize`, required): Your client.
- **`product`** (`String`, required): Your product ID or SKU.
- **`modifier`** (`Modifier`, optional, default `Modifier`): Compose modifier.
- **`variant`** (`SizeGuideVariant`, optional, default `SizeGuideVariant.LINK`): `LINK` (32 dp tall, 48 dp touch target) or `BUTTON`.
- **`label`** (`String?`, optional, default `null`): your own words instead of "Size guide".
- **`textStyle`** (`TextStyle`, optional, default `TextStyle(fontSize = 15.sp)`): your text style (font, size); the colour defaults to the app theme's text colour.
- **`onRecommendation`** (`((Recommendation) -> Unit)?`, optional, default `null`): the shopper's recommended size, on show and on every change (sizes only).

## Example

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

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

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