When using `AlertDialog` in `MaterialTheme` why ar...

# compose

[Mark]

When using AlertDialog in MaterialTheme why are the buttons not styled according to Material spec?

https://foso.github.io/Jetpack-Compose-Playground/material/alertdialog/
https://m2.material.io/components/dialogs/android#alert-dialog

[Albert Chang]

Because the sample in the first link is using the wrong component. TextButton should be used instead of Button. See official document.

[Mark]

Yes, I see that in the official sample. I’ve seen many examples out in the wild using Button instead of TextButton, most likely because that’s the most instinctive composable to use. It seems a likely error that by having such a flexible confirmButton and dismissButton that the spec will be disregarded. What I was wondering was whether a Button used in, say, confirmButton composable, would somehow pick up some styling (by default) that would make it look like the appropriate TextButton (which is just a Button with a couple of default args).

[Albert Chang]

Then what if you want to use a button with normal button style?

[Albert Chang]

The flexibility is one of the advantages of compose.

[Mark]

There should be some easy way to say, I want to show a button in Material 2 spec for AlertDialog, and that this should be default when wrapped inside a MaterialTheme composable. Or at least some way to say it explicitly. I guess that’s how it was done in the XML world, so it takes some adjusting. It just seems strange to me that there is not an easier way to create an AlertDialog without these potential issues that are easily made. At the very least I would also expect a composable for AlertDialog that takes simple button labels (Strings) to ensure they are styled correctly, since this is probably what 90% (or even 99%) of cases require.

[Albert Chang]

I bet 90% apps don't strictly follow material design 😉
Anyway, slot API pattern is definitely an improvement: https://chris.banes.me/posts/slotting-in-with-compose-ui/

[Mark]

I agree 90% of apps don’t, but 90% of apps using Material theme, want to have dialog buttons that follow Material spec. BTW, this is not an argument against slot API. It’s more a question of how styling works, and, in my early experience, how difficult is to get composables to follow Material spec. Quite possibly, I’m missing something here. When creating composables for, say, dialog title, text, confirmButton, I’m ending up spending a lot of time trying to figure out how to apply the proper styling. I’m not seeing many defaults being applied from the theme. For example, using a TextButton for confirmButton the label is not captialized, so I have to do it myself. Or for the title, I end up trying a bunch of different text styles until I find one that looks right (subtitle1 and bold!?). What am I missing?

[Albert Chang]

Always read the official document first as the usage is clearly documented in the sample code.
Btw you don't have to style the title manually. It'll be styled automatically, as shown in the sample code. Also bold text is not a requirement. See the image in your second link.

[Mark]

Yes, you’re right the title is being styled properly (I guess my custom styling was just some early legacy code!). But how about the button capitalization? It seems M2 spec captialises, but M3 doesn’t. But I’m importing Material 2 dependency, so shouldn’t the default conform to that?

[Albert Chang]

You can argue that, but personally I prefer having more control myself.

[Mark]

I mean, why is some styling applied, but others not?

[Albert Chang]

If you find it confusing you can always file a feature request.

[Mark]

I’m just trying to understand how styles are applied and why some material spec styles are applied (e.g. dialog title) but others are not (e.g. button capitalisation). I’m not suggesting any new behavior.