do you guys know where is the margin from box coming from?

# compose

[Pedro Alberto]

do you guys know where is the margin from box coming from?

[Stylianos Gakis]

Button should be the one doing more than you imagine. What if you replace button with another Box() to see how that’d look like.

[Zaki Shaikh]

Padding is coming from button if you look into the button source code you will find contentPadding default is 8.dp

[Pedro Alberto]

but if have a box with WrapContentSize and button inside I expect the size to be same as button

[Pedro Alberto]

@Zaki Shaikh I did put that to zero in the button

contentPadding = PaddingValues(0.dp),

[Stylianos Gakis]

Yeah that’s the size of the button. It has some area around it, and then it provides the drawing.

[Stylianos Gakis]

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/Button.kt;l=100?q=contentPadding:%20PaddingValues%20%3D%20ButtonDefaults.ContentPadding,

https://cs.android.com/androidx/platform/tools/dokka-devsite-plugin/+/master:testDat[…]ce/androidx/compose/material/Button.kt;l=301?q=ButtonDefaults

https://cs.android.com/androidx/platform/tools/dokka-devsite-plugin/+/master:testDat[…]ndroidx/compose/material/Button.kt;l=306-311?q=ButtonDefaults

[Zaki Shaikh]

Yeah I would have done this if I would have faced this

[Stylianos Gakis]

Aha, I think it’s because Button uses internally the Surface overload which accepts a onClick lambda which means that it then adds the minimumTouchTargetSize modifier so that it doesn’t become to small, and that one has a min size of 48.dp width and height.
So even if you don’t add the padding on the button itself, it picks it up from the Surface overload.

[Pedro Alberto]

can we change that ? some how @Stylianos Gakis

[Stylianos Gakis]

I don't see a way just from glancing at the code.
But you should consider if you really want to make the touch size that small in the first place. These standards exist to make everything tappable for no matter who the user is. Making it smaller might make it really challenging for some people to use your app. So maybe consider making the button itself taller instead to fill the entire height?

[Pedro Alberto]

@Preview
@Composable
fun testingBox() {
    Box(modifier = Modifier
        .height(52.dp)
        .padding(0.dp)
        .wrapContentSize()
        .clip(OXDesignSystemTheme.shapes.extraLarge)
        .border(BorderStroke(0.dp, SolidColor(Color.Transparent)), MyDesignSystemTheme.shapes.extraLarge)
        .background(Color.Green)) {
        Button(
            onClick = { /*TODO*/ },
            modifier = Modifier
                .height(52.dp)
                .padding(0.dp)
                .clip(RoundedCornerShape(10.dp)),
            contentPadding = PaddingValues(8.dp),
            shape = MyDesignSystemTheme.shapes.extraLarge
        ) {
            Text(text = "Hello Hello")
        }
    }
}

[Pedro Alberto]

this is the closes I can get

[Pedro Alberto]

but as you can see I can still see a green line on the rounded corners