---
title: "Box"
description: "A layout composable with [content]. The [Box] will size itself to fit the content, subject to the
incoming constraints. When children are smaller than the parent, by default they will be
positioned inside the [Box] according to the [contentAlignment]. For individually specifying the
alignments of the children layouts, use the [BoxScope.align] modifier. By default, the content
will be measured without the [Box]'s incoming min constraints, unless [propagateMinConstraints]
is `true`. As an example, setting [propagateMinConstraints] to `true` can be useful when the
[Box] has content on which modifiers cannot be specified directly and setting a min size on the
content of the [Box] is needed. If [propagateMinConstraints] is set to `true`, the min size set
on the [Box] will also be applied to the content, whereas otherwise the min size will only apply
to the [Box]. When the content has more than one layout child the layout children will be stacked
one on top of the other (positioned as explained above) in the composition order."
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
inline fun Box(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit,
)
```


A layout composable with `content`. The `Box` will size itself to fit the content, subject to the
incoming constraints. When children are smaller than the parent, by default they will be
positioned inside the `Box` according to the `contentAlignment`. For individually specifying the
alignments of the children layouts, use the `BoxScope.align` modifier. By default, the content
will be measured without the `Box`'s incoming min constraints, unless `propagateMinConstraints`
is `true`. As an example, setting `propagateMinConstraints` to `true` can be useful when the
`Box` has content on which modifiers cannot be specified directly and setting a min size on the
content of the `Box` is needed. If `propagateMinConstraints` is set to `true`, the min size set
on the `Box` will also be applied to the content, whereas otherwise the min size will only apply
to the `Box`. When the content has more than one layout child the layout children will be stacked
one on top of the other (positioned as explained above) in the composition order.

#### Parameters

| | |
| --- | --- |
| modifier | The modifier to be applied to the layout. |
| contentAlignment | The default alignment inside the Box. |
| propagateMinConstraints | Whether the incoming min constraints should be passed to content. |
| content | The content of the `Box`. |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun Box(modifier: Modifier)
```


A box with no content that can participate in layout, drawing, pointer input due to the
`modifier` applied to it.

#### Parameters

| | |
| --- | --- |
| modifier | The modifier to be applied to the layout. |





## Code Examples
### SimpleBox
```kotlin
@Composable
fun SimpleBox() {
    Box {
        Box(Modifier.fillMaxSize().background(Color.Cyan))
        Box(
            Modifier.matchParentSize().padding(top = 20.dp, bottom = 20.dp).background(Color.Yellow)
        )
        Box(Modifier.matchParentSize().padding(40.dp).background(Color.Magenta))
        Box(Modifier.align(Alignment.Center).size(300.dp, 300.dp).background(Color.Green))
        Box(Modifier.align(Alignment.TopStart).size(150.dp, 150.dp).background(Color.Red))
        Box(Modifier.align(Alignment.BottomEnd).size(150.dp, 150.dp).background(Color.Blue))
    }
}
```