While migrating some screen from Views to Compose there was an inconsistency regarding the background color that I’d like to hear more about. Basically we’ve in some places relied on the functionality of the

OutlinedButton

style having a transparent background. This doesn’t seem to be the case in the compose version as it defines the

surface

color of the

MaterialTheme

as its background instead. I would love to hear more about what is the idea behind it? More often than not, when using an

Outlined

button, one would like to have it show the text and the outline but blend in with whatever is in the background by basically having no background. That is since what’s behind it often is not a

surface

. It could be for an image or some color close to surface not not quite the same. My guess would be that this was done to ensure a proper pair of surface/onSurface color to ensure accessibility, so it this the reason? Anything else I’m missing? We’re considering altering our design system’s outlined button to always have a transparent background (while still using onSurface for the content) and I would basically like to hear more about this to see why we may want/not want to do this. Assuming we’re taking care of making the content legible on a per-case basis of course.

so it this the reason

I’m not entirely sure to be honest but @Louis Pullen-Freilich [G] who implemented those components may know. I agree it’s strange to see that given the callout to transparent container in the guidelines, and that the View implementation also using a transparent background.

The internal specs for outlined button state surface should be the background color, so I’m not really sure how to reconcile that with the other implementations / public information

Yeah I can definitely see the default being either or as I said, not strong opinions on that part. Plus luckily it’s super straightforward to recreate this behavior with a wrapper around the OutlinedButton simply adding

colors = ButtonDefaults.outlinedButtonColors(backgroundColor = Color.Transparent)

on the colors param, so that’s not a problem. I was mostly curious about how it’s inconsistent with the View system and how the docs had this picture that showed a transparent one. I wonder if and how much you’ve tried to stay consistent with the View system, and if this particular case was just an example of a case where you felt strongly against keeping this consistent. I also now wonder what the default is for Flutter for example 🤔 p.s. I believe this change a good step forward since this makes sure that the text is legible by default, just caught me by surprise initially that’s all.