State of Compose 2023 results are in! Click here to learn more

← Back to Foundation

Box

Component
in
Foundation
. Since 0.1.0-dev15

Overview

Code Examples

A convenience composable that combines common layout and draw logic.

In order to define the size of the Box, the androidx.compose.foundation.layout.width, androidx.compose.foundation.layout.height and androidx.compose.foundation.layout.size modifiers can be used. The Box will try to be only as small as its content. However, if it is constrained otherwise, Box will allow its content to be smaller and will position the content inside, according to gravity.

The specified padding will be applied inside the Box. In order to apply padding outside the Box, the androidx.compose.foundation.layout.padding modifier should be used.

Overloads

Box

@Composable
fun Box(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    backgroundColor: Color = Color.Transparent,
    border: BorderStroke? = null,
    padding: Dp = border?.width ?: 0.dp,
    paddingStart: Dp = Dp.Unspecified,
    paddingTop: Dp = Dp.Unspecified,
    paddingEnd: Dp = Dp.Unspecified,
    paddingBottom: Dp = Dp.Unspecified,
    gravity: ContentGravity = ContentGravity.TopStart,
    children: @Composable () -> Unit = emptyContent()
)

Parameters

NameDescription
modifierThe modifier to be applied to the Box
shapeThe shape of the box
backgroundColorThe Color for background with. If Color.Transparent, there will be no background
borderBorderStroke object that specifies border appearance, such as size and color. If null, there will be no border
paddingThe padding to be applied inside Box, along its edges. Unless otherwise specified, content will be padded by the BorderStroke.width, if border is provided
paddingStartsets the padding of the start edge. Setting this will override padding for the start edge
paddingTopsets the padding of the top edge. Setting this will override padding for the top edge
paddingEndsets the padding of the end edge. Setting this will override padding for the end edge
paddingBottomsets the padding of the bottom edge. Setting this will override padding for the bottom edge
gravityThe gravity of the content inside Bo