# RowScope

Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Row.kt+class:androidx.compose.foundation.layout.RowScope) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0) Common/AllAndroid/JVM
- Cmn

  ```
  @LayoutScopeMarker
  interface RowScope
  ```
Known direct subclasses [ContextualFlowRowScope](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowScope), [FlowRowScope](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowScope), [MultiChoiceSegmentedButtonRowScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/MultiChoiceSegmentedButtonRowScope), [SingleChoiceSegmentedButtonRowScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/SingleChoiceSegmentedButtonRowScope)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowScope` | **This interface is deprecated.** ContextualFlowLayouts are no longer maintained |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowScope` | Scope for the children of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowRowOverflow,kotlin.Function1)`. |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/MultiChoiceSegmentedButtonRowScope` | Scope for the children of a `https://developer.android.com/reference/kotlin/androidx/compose/material3/MultiChoiceSegmentedButtonRow.composable#MultiChoiceSegmentedButtonRow(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,kotlin.Function1)` |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/SingleChoiceSegmentedButtonRowScope` | Scope for the children of a `https://developer.android.com/reference/kotlin/androidx/compose/material3/SingleChoiceSegmentedButtonRow.composable#SingleChoiceSegmentedButtonRow(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,kotlin.Function1)` |

Known indirect subclasses [ContextualFlowRowOverflowScope](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowOverflowScope), [FlowRowOverflowScope](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflowScope)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ContextualFlowRowOverflowScope` | **This interface is deprecated.** ContextualFlowLayouts are no longer maintained |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflowScope` | Scope for the overflow `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowRowOverflow,kotlin.Function1)`. |

*** ** * ** ***

Scope for the children of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`.

## Summary

| ### Public functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).align(androidx.compose.ui.Alignment.Vertical)(alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical)` Align the element vertically within the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(kotlin.Function1)(alignmentLineBlock: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Measured) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)` Position the element vertically such that the alignment line for the content as determined by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(kotlin.Function1)` aligns with sibling elements also configured to `alignBy`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.HorizontalAlignmentLine)(alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/HorizontalAlignmentLine)` Position the element vertically such that its `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.HorizontalAlignmentLine)` aligns with sibling elements also configured to `alignBy`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignByBaseline()()` Position the element vertically such that its first baseline aligns with sibling elements also configured to `alignByBaseline` or `alignBy`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)( weight: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, fromInclusive = false) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, fill: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Size the element's width proportional to its `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)` relative to other weighted sibling elements in the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. | Cmn |

| ### Extension functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)( visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content when the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` is in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)( visibleState: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`'s `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` changes. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.foundation.layout.RowScope).BottomNavigationItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)( selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, icon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, label: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, alwaysShowLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, selectedContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, unselectedContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color )` [Material Design bottom navigation](https://material.io/components/bottom-navigation) | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.foundation.layout.RowScope).NavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.NavigationBarItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)( selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, icon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, label: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, alwaysShowLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationBarItemColors, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? )` Material Design navigation bar item. | Cmn |

## Public functions

### Modifier.align

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Row.kt+function:align) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
fun Modifier.align(alignment: Alignment.Vertical): Modifier
```

Align the element vertically within the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. This alignment will have priority over the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`'s `verticalAlignment` parameter.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

Row(Modifier.fillMaxHeight()) {
    // The child with no align modifier is positioned by default so that its top edge is
    // aligned to the top of the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).background(Color.Magenta))
    // Gravity.Top, the child will be positioned so that its top edge is aligned to the top
    // of the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).align(Alignment.Top).background(Color.Red))
    // Gravity.Center, the child will be positioned so that its center is in the middle of
    // the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).align(Alignment.CenterVertically).background(Color.Yellow))
    // Gravity.Bottom, the child will be positioned so that its bottom edge is aligned to the
    // bottom of the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).align(Alignment.Bottom).background(Color.Green))
}
```

### Modifier.alignBy

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Row.kt+function:alignBy) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
fun Modifier.alignBy(alignmentLineBlock: (Measured) -> Int): Modifier
```

Position the element vertically such that the alignment line for the content as determined by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(kotlin.Function1)` aligns with sibling elements also configured to `alignBy`. `alignBy` is a form of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).align(androidx.compose.ui.Alignment.Vertical)`, so both modifiers will not work together if specified for the same layout. Within a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`, all components with `alignBy` will align vertically using the specified `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/HorizontalAlignmentLine`s or values obtained from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(kotlin.Function1)`, forming a sibling group. At least one element of the sibling group will be placed as it had `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#Top()` align in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`, and the alignment of the other siblings will be then determined such that the alignment lines coincide. Note that if only one element in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` has the `alignBy` modifier specified the element will be positioned as if it had `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#Top()` align.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Row(Modifier.fillMaxHeight()) {
    // The center of the magenta Box and the baselines of the two texts will be
    // vertically aligned. Note that alignBy() or alignByBaseline() has to be specified
    // for all children we want to take part in the alignment. For example, alignByBaseline()
    // means that the baseline of the text should be aligned with the alignment line
    // (possibly another baseline) specified for siblings using alignBy or alignByBaseline.
    // If no other sibling had alignBy() or alignByBaseline(), the modifier would have no
    // effect.
    Box(
        modifier =
            Modifier.size(80.dp, 40.dp)
                .alignBy { it.measuredHeight / 2 }
                .background(Color.Magenta)
    )
    Text(
        text = "Text 1",
        fontSize = 40.sp,
        modifier = Modifier.alignByBaseline().background(color = Color.Red),
    )
    Text(text = "Text 2", modifier = Modifier.alignByBaseline().background(color = Color.Cyan))
}
```

### Modifier.alignBy

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Row.kt+function:alignBy) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
fun Modifier.alignBy(alignmentLine: HorizontalAlignmentLine): Modifier
```

Position the element vertically such that its `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.HorizontalAlignmentLine)` aligns with sibling elements also configured to `alignBy`. `alignBy` is a form of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).align(androidx.compose.ui.Alignment.Vertical)`, so both modifiers will not work together if specified for the same layout. `alignBy` can be used to align two layouts by baseline inside a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`, using `alignBy(FirstBaseline)`. Within a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`, all components with `alignBy` will align vertically using the specified `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/HorizontalAlignmentLine`s or values provided using the other `alignBy` overload, forming a sibling group. At least one element of the sibling group will be placed as it had `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#Top()` align in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`, and the alignment of the other siblings will be then determined such that the alignment lines coincide. Note that if only one element in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` has the `alignBy` modifier specified the element will be positioned as if it had `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#Top()` align.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Row(Modifier.fillMaxHeight()) {
    // The center of the magenta Box and the baselines of the two texts will be
    // vertically aligned. Note that alignBy() or alignByBaseline() has to be specified
    // for all children we want to take part in the alignment. For example, alignByBaseline()
    // means that the baseline of the text should be aligned with the alignment line
    // (possibly another baseline) specified for siblings using alignBy or alignByBaseline.
    // If no other sibling had alignBy() or alignByBaseline(), the modifier would have no
    // effect.
    Box(
        modifier =
            Modifier.size(80.dp, 40.dp)
                .alignBy { it.measuredHeight / 2 }
                .background(Color.Magenta)
    )
    Text(
        text = "Text 1",
        fontSize = 40.sp,
        modifier = Modifier.alignByBaseline().background(color = Color.Red),
    )
    Text(text = "Text 2", modifier = Modifier.alignByBaseline().background(color = Color.Cyan))
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignByBaseline()` |   |

### Modifier.alignByBaseline

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Row.kt+function:alignByBaseline) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
fun Modifier.alignByBaseline(): Modifier
```

Position the element vertically such that its first baseline aligns with sibling elements also configured to `alignByBaseline` or `alignBy`. This modifier is a form of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).align(androidx.compose.ui.Alignment.Vertical)`, so both modifiers will not work together if specified for the same layout. `alignByBaseline` is a particular case of `alignBy`. See `alignBy` for more details.

Example usage:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Row(Modifier.fillMaxHeight()) {
    // The center of the magenta Box and the baselines of the two texts will be
    // vertically aligned. Note that alignBy() or alignByBaseline() has to be specified
    // for all children we want to take part in the alignment. For example, alignByBaseline()
    // means that the baseline of the text should be aligned with the alignment line
    // (possibly another baseline) specified for siblings using alignBy or alignByBaseline.
    // If no other sibling had alignBy() or alignByBaseline(), the modifier would have no
    // effect.
    Box(
        modifier =
            Modifier.size(80.dp, 40.dp)
                .alignBy { it.measuredHeight / 2 }
                .background(Color.Magenta)
    )
    Text(
        text = "Text 1",
        fontSize = 40.sp,
        modifier = Modifier.alignByBaseline().background(color = Color.Red),
    )
    Text(text = "Text 2", modifier = Modifier.alignByBaseline().background(color = Color.Cyan))
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.HorizontalAlignmentLine)` |   |

### Modifier.weight

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/Row.kt+function:weight) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
fun Modifier.weight(
    weight: @FloatRange(from = 0.0, fromInclusive = false) Float,
    fill: Boolean = true
): Modifier
```

Size the element's width proportional to its `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)` relative to other weighted sibling elements in the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. The parent will divide the horizontal space remaining after measuring unweighted child elements and distribute it according to this weight. When `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)` is true, the element will be forced to occupy the whole width allocated to it. Otherwise, the element is allowed to be smaller - this will result in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` being smaller, as the unused allocated width will not be redistributed to other siblings.

| Parameters |
|---|---|
| `weight: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, fromInclusive = false) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | The proportional width to give to this element, as related to the total of all weighted siblings. Must be positive. |
| `fill: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | When `true`, the element will occupy the whole width allocated. |

## Extension functions

### RowScope.AnimatedVisibility

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

```
@Composable
fun RowScope.AnimatedVisibility(
    visible: Boolean,
    modifier: Modifier = Modifier,
    enter: EnterTransition = fadeIn() + expandHorizontally(),
    exit: ExitTransition = fadeOut() + shrinkHorizontally(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content when the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` is in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. The default animations are tailored specific to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` layout. See more details below.

Different `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s can be defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` for the appearance and disappearance animation. There are 4 types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`: Fade, Expand/Shrink, Scale, and Slide. The enter transitions can be combined using `+`. Same for exit transitions. The order of the combination does not matter, as the transition animations will start simultaneously. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` for details on the three types of transition.

The default `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` transition is configured based on the horizontal layout of a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to a combination of fading in and expanding the content horizontally. (The end of the content will be the leading edge as the content expands to its full width.) And `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to shrinking the content horizontally with the end of the content being the leading edge while fading out. The expanding and shrinking will likely also animate the parent and siblings in the row since they rely on the size of appearing/disappearing content.

Aside from these three types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the `Transition<EnterExitState>` object from the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()`). See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitState` for an example of custom animations. These custom animations will be running along side of the built-in animations specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. In cases where the enter/exit animation needs to be completely customized, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can be specified as `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` as needed. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will wait until *all* of enter/exit animations to finish before it considers itself idle. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will only be removed after all the (built-in and custom) exit animations have finished.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` creates a custom `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`.

**Note** : Once the exit transition is finished, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable will be removed from the tree, and disposed. If there's a need to observe the state change of the enter/exit transition and follow up additional action (e.g. remove data, sequential animation, etc), consider the AnimatedVisibility API variant that takes a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState` parameter.

Here's an example of using `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`:

```kotlin
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material.Button
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

var expanded by remember { mutableStateOf(true) }
FloatingActionButton(
    onClick = { expanded = !expanded },
    modifier = Modifier.align(Alignment.CenterHorizontally),
) {
    Row(Modifier.padding(start = 12.dp, end = 12.dp)) {
        Icon(
            Icons.Default.Favorite,
            contentDescription = "Favorite",
            modifier = Modifier.align(Alignment.CenterVertically),
        )
        AnimatedVisibility(expanded, modifier = Modifier.align(Alignment.CenterVertically)) {
            Text(modifier = Modifier.padding(start = 12.dp), text = "Favorite")
        }
    }
}
Spacer(Modifier.requiredHeight(20.dp))
```

| Parameters |
|---|---|
| `visible: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | defines whether the content should be visible |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | modifier for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` created to contain the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = fadeIn() + expandHorizontally()` | EnterTransition(s) used for the appearing animation, fading in while expanding horizontally by default |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = fadeOut() + shrinkHorizontally()` | ExitTransition(s) used for the disappearing animation, fading out while shrinking horizontally by default |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "AnimatedVisibility"` | A label to differentiate from other animations in Android Studio animation preview. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Content to appear or disappear based on the value of `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.ColumnScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` |   |

### RowScope.AnimatedVisibility

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

```
@Composable
fun RowScope.AnimatedVisibility(
    visibleState: MutableTransitionState<Boolean>,
    modifier: Modifier = Modifier,
    enter: EnterTransition = expandHorizontally() + fadeIn(),
    exit: ExitTransition = shrinkHorizontally() + fadeOut(),
    label: String = "AnimatedVisibility",
    content: @Composable AnimatedVisibilityScope.() -> Unit
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable animates the appearance and disappearance of its content as `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`'s `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState#targetState()` changes. The default `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` transitions are tailored specific to the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` layout. See more details below. The `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can also be used to observe the state of `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. For example: `visibleState.isIdle` indicates whether all the animations have finished in `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`, and `visibleState.currentState` returns the initial state of the current animations.

Different `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition`s and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`s can be defined in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` for the appearance and disappearance animation. There are 4 types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`: Fade, Expand/Shrink, Scale and Slide. The enter transitions can be combined using `+`. Same for exit transitions. The order of the combination does not matter, as the transition animations will start simultaneously. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` for details on the three types of transition.

The default `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` transition is configured based on the horizontal layout of a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to a combination of fading in and expanding the content horizontally. (The end of the content will be the leading edge as the content expands to its full width.) And `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` defaults to shrinking the content horizontally with the end of the content being the leading edge while fading out. The expanding and shrinking will likely also animate the parent and siblings in the row since they rely on the size of appearing/disappearing content.

Aside from these three types of `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the `Transition<EnterExitState>` object from the `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope#transition()`). See `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterExitState` for an example of custom animations. These custom animations will be running along side of the built-in animations specified in `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`. In cases where the enter/exit animation needs to be completely customized, `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` can be specified as `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition#None()` and/or `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition#None()` as needed. `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will wait until *all* of enter/exit animations to finish before it considers itself idle. `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` will only be removed after all the (built-in and custom) exit animations have finished.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` creates a custom `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`.

**Note** : Once the exit transition is finished, the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` composable will be removed from the tree, and disposed. Both `currentState` and `targetState` will be `false` for `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)`.

| Parameters |
|---|---|
| `visibleState: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/MutableTransitionState<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>` | defines whether the content should be visible |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | modifier for the `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)` created to contain the `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |
| `enter: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = expandHorizontally() + fadeIn()` | EnterTransition(s) used for the appearing animation, fading in while expanding vertically by default |
| `exit: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = shrinkHorizontally() + fadeOut()` | ExitTransition(s) used for the disappearing animation, fading out while shrinking vertically by default |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "AnimatedVisibility"` | A label to differentiate from other animations in Android Studio animation preview. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Content to appear or disappear based on the value of `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeIn(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#expandIn(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#fadeOut(androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#shrinkOut(androidx.compose.animation.core.FiniteAnimationSpec,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.foundation.layout.RowScope).AnimatedVisibility(androidx.compose.animation.core.MutableTransitionState,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.String,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibility.composable#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope` |   |

### RowScope.BottomNavigationItem

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

```
@Composable
fun RowScope.BottomNavigationItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    label: (@Composable () -> Unit)? = null,
    alwaysShowLabel: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    selectedContentColor: Color = LocalContentColor.current,
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)
): Unit
```

[Material Design bottom navigation](https://material.io/components/bottom-navigation)

The recommended configuration for a BottomNavigationItem depends on how many items there are inside a `https://developer.android.com/reference/kotlin/androidx/compose/material/BottomNavigation.composable#BottomNavigation(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,kotlin.Function1)`:

- Three destinations: Display icons and text labels for all destinations.

- Four destinations: Active destinations display an icon and text label. Inactive destinations display icons, and text labels are recommended.

- Five destinations: Active destinations display an icon and text label. Inactive destinations use icons, and use text labels if space permits.

A BottomNavigationItem always shows text labels (if it exists) when selected. Showing text labels if not selected is controlled by `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#(androidx.compose.foundation.layout.RowScope).BottomNavigationItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`.

| Parameters |
|---|---|
| `selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether this item is selected |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the callback to be invoked when this item is selected |
| `icon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | icon for this item, typically this will be an `https://developer.android.com/reference/kotlin/androidx/compose/material/Icon.composable#Icon(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color)` |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` for this item |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this item. When `false`, this item will not be clickable and will appear disabled to accessibility services. |
| `label: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | optional text label for this item |
| `alwaysShowLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether to always show the label for this item. If false, the label will only be shown when this item is selected. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this item. You can use this to change the item's appearance or preview the item in different states. Note that if `null` is provided, interactions will still happen internally. |
| `selectedContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = LocalContentColor.current` | the color of the text label and icon when this item is selected, and the color of the ripple. |
| `unselectedContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = selectedContentColor.copy(alpha = ContentAlpha.medium)` | the color of the text label and icon when this item is not selected |

### RowScope.NavigationBarItem

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/NavigationBar.kt+function:NavigationBarItem)

```
@Composable
fun RowScope.NavigationBarItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    label: (@Composable () -> Unit)? = null,
    alwaysShowLabel: Boolean = true,
    colors: NavigationBarItemColors = NavigationBarItemDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit
```

Material Design navigation bar item.

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

The recommended configuration for a `https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationBarItem.composable#(androidx.compose.foundation.layout.RowScope).NavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.NavigationBarItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)` depends on how many items there are inside a `https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationBar.composable#NavigationBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)`:

- Three destinations: Display icons and text labels for all destinations.

- Four destinations: Active destinations display an icon and text label. Inactive destinations display icons, and text labels are recommended.

- Five destinations: Active destinations display an icon and text label. Inactive destinations use icons, and use text labels if space permits.

A `https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationBarItem.composable#(androidx.compose.foundation.layout.RowScope).NavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.NavigationBarItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)` always shows text labels (if it exists) when selected. Showing text labels if not selected is controlled by `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#(androidx.compose.foundation.layout.RowScope).NavigationBarItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.NavigationBarItemColors,androidx.compose.foundation.interaction.MutableInteractionSource)`.

| Parameters |
|---|---|
| `selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether this item is selected |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | called when this item is clicked |
| `icon: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | icon for this item, typically an `https://developer.android.com/reference/kotlin/androidx/compose/material3/Icon.composable#Icon(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color)` |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this item |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this item. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| `label: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | optional text label for this item |
| `alwaysShowLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether to always show the label for this item. If `false`, the label will only be shown when this item is selected. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationBarItemColors = NavigationBarItemDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationBarItemColors` that will be used to resolve the colors used for this item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationBarItemDefaults#colors()`. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this item. You can use this to change the item's appearance or preview the item in different states. Note that if `null` is provided, interactions will still happen internally. |