https://kotlinlang.org logo
Join Slack
Powered by
Why does material design button include padding on...
# compose
p
Why does material design button include padding on top and bottom by default? Is there any way to exclude it?
Copy code
@Preview
@Composable
fun Preview() {
    Column {
        Box(
            modifier = Modifier
                .background(Color.Blue)
                .fillMaxWidth()
                .height(10.dp)
        )

        androidx.compose.material3.Button(
            modifier = Modifier
                .fillMaxWidth(),
//                .height(30.dp)
//                .defaultMinSize(minHeight = 1.dp),
            contentPadding = PaddingValues(all = 0.dp)
        ) {
            Text(text = "Log in",)
        }

        Box(
            modifier = Modifier
                .background(Color.Blue)
                .fillMaxWidth()
                .height(10.dp)
        )
    }
}
c
It is not a padding. This is the enforced touch target size. From accessibility perspective a Button with only 30.dp of height is hard to tap
👍 1
p
Looking at source code, you should be able to override it, by setting 
heightIn
?
Copy code
/**
     * The default min height applied for all buttons. Note that you can override it by applying
     * Modifier.heightIn directly on the button composable.
     */
    val MinHeight = 40.dp
note that, even if I don't set 
height(30.dp)
, it still has that padding
c
This is different from the height. This touch size will be enforced regardless of the size of the clickable component. You can disable it, but It is not recommended, especially for Buttons like this https://stackoverflow.com/a/75408239/2162993
👍 1
p
Hm, I see. Is there a way, to specify distance between 2 buttons? I would like buttons to be spaced by 10.dp. With included padding, it's kind of hard to to that. Also not ideal, since you need to assume initial padding
c
I’m affraid you have to do the math yourself if your design is not prepared for this. (48-30)/2 will be the padding on the top and bottom of each button. You can add as much extra as you want
10 dp is too low, you will not be able to achieve it without disabling min touch size enforcement
p
I see, will try to annoy my designer 🙂
😁 1
👍 1
c
just tell them it is not possible to disable it 🤪
p
I guess it would it make sense to add a feature request for a modifier like that, or smth similar?
c
There is a CompositionLocal you can use to disable this, why would you need a modifier? I think it is not exposed more on purpose. Material is an opinionated design system. It is one of the rules Material has.
p
What I mean, is to have an option, to specify spacing between 2 visible elements, without disabling minimum touch size
To avoid doing math, like 
(48-30)/2
etc
c
Ahh I see. I think it would be really complicated to design such modifier. Eg. if you passed 10.dp for such modifier, it would need to overlap the Buttons, since the gap between them should be 18.dp at least, if you want to keep the 48.dp min touch target for both Buttons. So in order to get them as close to each other as 10.dp, one of the Buttons has to loose 8.dp of touch height
p
I guess you could limit what kind of min-size it can take, to avoid overlapping
m
I just learned something very important. To be able to switch this off is very interesting for desktop usage of Compose where this enforced minimum size does not make much sense and just leads to strange looking designs. Material becomes much more usable on desktop now. I have to give it a try cheers.
p
@Csaba Szugyiczki thanks for good info 🍺
👍 2
cheers 2
c
m
But the switch to turn that off is younger 😉.
2 Views
Open in Slack
PreviousNext
Powered by