Search code examples
androidandroid-jetpack-composematerial-design

How to give a Material 3 Button the same color in disabled state as in enabled state?


I want to to create a Button that when disabled keeps the color of an enabled button (I then switch the button content from a text to a circular progress indicator). However I don't know how to "reference" the default colors. My idea is to use ButtonDefaults and override some values like this:

@Preview
@Composable
private fun ButtonSandbox() {
    Button(
        enabled = false,
        modifier = Modifier.fillMaxWidth(),
        onClick = {},
        colors = ButtonDefaults.buttonColors(
            containerColor = , // how to reference default for enabled button here?
            contentColor = , // how to reference default for enabled button here?
            disabledContainerColor = , // how to reference default for enabled button here?
            disabledContentColor = // how to reference default for enabled button here?
        )
    ) {
        CircularProgressIndicator(
            modifier = Modifier.size(ButtonDefaults.IconSize)
        )
    }
}

So, how can I reference the default colors of an enabled Button?


Solution

  • The default color for a Button is the material theme primary color, and content is the OnPrimary color.

    You can just do :

    
    @Preview
    @Composable
    private fun ButtonSandbox() {
        Button(
            enabled = false,
            modifier = Modifier.fillMaxWidth(),
            onClick = {},
            colors = ButtonDefaults.buttonColors(
                disabledContainerColor = MaterialTheme.colorScheme.primary,
                disabledContentColor = MaterialTheme.colorScheme.onPrimary,
            )
        ) {
            CircularProgressIndicator(
                modifier = Modifier.size(ButtonDefaults.IconSize)
            )
        }
    }