Stylianos Gakis
03/28/2022, 9:33 AMOutlinedButton
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.Chris Sinco [G]
03/30/2022, 5:50 PMso it this the reasonI’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.
Color.Transparent
through the colors
param, so you aren’t totally blocked and needing to reimplement. You just will need to create a custom Composable wrapper.Louis Pullen-Freilich [G]
03/30/2022, 5:58 PMStylianos Gakis
03/30/2022, 6:12 PMcolors = 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.