Hi here! I’m building a design system with compose...

# compose

[gpaligot]

Hi here!
I’m building a design system with compose and my designers want to create a disabled button where an alpha is applied on the entire component but where the transparency applied on the text doesn’t show the background behind.
Because a button with compose is a surface and a text in top of it, I would like to know if it is something possible or not? 🤔
You can find the Figma visual and the Compose preview to show the current difference between the design specification and the compose implementation
Thanks in advance if someone have an idea!

[Kirill Grouchnikov]

"but where the transparency applied on the text doesn’t show the background behind" - this is not clear. If alpha is applied on the text, it needs to be mixed with "something" that comes from behind that text - which is the background.

[Kirill Grouchnikov]

If you want your text color to always be full opacity, then in your custom composable, apply the alpha only on the "thing" (box, canvas, however you implement it) that draws the background. And use full opacity color on the text.

[Siyamed]

Looks like you are looking for a color otherwise if i understand correctly what you describe is transparent but not transparent

[Chris Sinco [G]]

I think also you can pass custom background colors to Button, so you could just pass colors with specific opacity, which shouldn’t change the Text opacity.

[Chris Sinco [G]]

Though IMHO, as a designer, not applying opacity to the entire component when disabled seems a bit odd in terms of general design consistency with disabled controls