# Label

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3Api @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/Label.composable#Label(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function0)( label: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/TooltipScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, isPersistent: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Label component that will append a `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Label(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function0)` to `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Label(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function0)`. | Cmn |

## Functions

### Label

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/Label.kt+function:Label)

```
@ExperimentalMaterial3Api
@Composable
fun Label(
    label: @Composable TooltipScope.() -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource? = null,
    isPersistent: Boolean = false,
    content: @Composable () -> Unit
): Unit
```

Label component that will append a `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Label(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function0)` to `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Label(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function0)`. The positioning logic uses `https://developer.android.com/reference/kotlin/androidx/compose/material3/TooltipDefaults#rememberTooltipPositionProvider(androidx.compose.ui.unit.Dp)`.

Label appended to thumbs of Slider:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Label
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSliderState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val sliderState = rememberSliderState(trackRange = 0f..100f)
val interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    Slider(
        state = sliderState,
        onValueChange = { sliderState.value = it },
        interactionSource = interactionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        thumb = {
            Label(
                label = {
                    PlainTooltip(modifier = Modifier.sizeIn(45.dp, 25.dp).wrapContentWidth()) {
                        Text("%.2f".format(sliderState.value))
                    }
                },
                interactionSource = interactionSource,
            ) {
                Icon(
                    imageVector = Icons.Filled.Favorite,
                    contentDescription = null,
                    modifier = Modifier.size(ButtonDefaults.IconSize),
                    tint = Color.Red,
                )
            }
        },
    )
}
```

Label appended to thumbs of RangeSlider:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material3.Label
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.rememberRangeSliderState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val rangeSliderState = rememberRangeSliderState(0f, 100f, trackRange = 0f..100f)
val startInteractionSource = remember { MutableInteractionSource() }
val endInteractionSource = remember { MutableInteractionSource() }
val startThumbAndTrackColors =
    SliderDefaults.colors(thumbColor = Color.Blue, activeTrackColor = Color.Red)
val endThumbColors = SliderDefaults.colors(thumbColor = Color.Green)
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    RangeSlider(
        state = rangeSliderState,
        onValueChange = {
            rangeSliderState.startValue = it.start
            rangeSliderState.endValue = it.endInclusive
        },
        startThumbInteractionSource = startInteractionSource,
        endThumbInteractionSource = endInteractionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
        startThumb = {
            Label(
                label = {
                    PlainTooltip(modifier = Modifier.sizeIn(45.dp, 25.dp).wrapContentWidth()) {
                        Text("%.2f".format(rangeSliderState.startValue))
                    }
                },
                interactionSource = startInteractionSource,
            ) {
                SliderDefaults.Thumb(
                    interactionSource = startInteractionSource,
                    colors = startThumbAndTrackColors,
                )
            }
        },
        endThumb = {
            Label(
                label = {
                    PlainTooltip(
                        modifier = Modifier.requiredSize(45.dp, 25.dp).wrapContentWidth()
                    ) {
                        Text("%.2f".format(rangeSliderState.endValue))
                    }
                },
                interactionSource = endInteractionSource,
            ) {
                SliderDefaults.Thumb(
                    interactionSource = endInteractionSource,
                    colors = endThumbColors,
                )
            }
        },
        track = { rangeSliderState ->
            SliderDefaults.Track(
                colors = startThumbAndTrackColors,
                rangeSliderState = rangeSliderState,
            )
        },
    )
}
```

| Parameters |
|---|---|
| `label: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/TooltipScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | composable that will be appended to `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Label(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function0)` |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be applied to `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Label(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function0)` |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` representing the stream of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Label(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function0)`. |
| `isPersistent: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | boolean to determine if the label should be persistent. If true, then the label will always show and be anchored to `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Label(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function0)`. if false, then the label will only show when pressing down or hovering over the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Label(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function0)`. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the composable that `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#Label(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.Function0)` will anchor to. |