Is it possible to set in a `MaterialTheme` a separate `typography` for a `TextButton`? Currently the...

# compose

[Lukasz Kalnik]

Is it possible to set in a MaterialTheme a separate typography for a TextButton? Currently there is only typography.button. But in our design the regular Button uses a different text color than a TextButton.

[Joseph Hawkes-Cates]

If none of the other typography definitions align with it, I’ve done something similar with colors by creating an extension on MaterialTheme.Colors. You could do the same thing for typogrophy. Not sure if there’s a better way to do this, though.

[Chris Sinco [G]]

Yep that is one option, as described here: https://developer.android.com/jetpack/compose/themes/custom#extending-material

[Lukasz Kalnik]

But isn't the text style "hardcoded" in the Button composable?

[Lukasz Kalnik]

[Lukasz Kalnik]

That means it will always take typography.button and I cannot have different typographies for a TextButton and a button with filled background.

[Chris Sinco [G]]

Other alternatives:
• Pass different colors via the colors parameter
• Override all styles by passing a textStyle in the Text composable within the Button content slot

[Lukasz Kalnik]

Yes, but then I have to pass it to every TextButton. I was hoping the MaterialTheme supports such differentiation but looks like it doesn't.

[Lukasz Kalnik]

Maybe the best option is to create a custom TextButton with the appropriate color.

[Joseph Hawkes-Cates]

I’ve accomplished this by wrapping my buttons in my own composable that provides the common styles I want

[Lukasz Kalnik]

Yes, looks like that's the best way.

[Lukasz Kalnik]

Thank you all for your quick and helpful answers! 🙏

[Chris Sinco [G]]

Yes, that is what I would suggest. The beauty of Compose is easily being able to wrap things and customize for reuse

[Chris Sinco [G]]

FWIW MaterialTheme.typography.button doesn’t have a color in the style

[Lukasz Kalnik]

But we override it with a TextStyle which has a color.

[Chris Sinco [G]]

Yes. I mention it though because if you want to change just color of a Material TextButton, then the colors parameter is the way to go. If you want to change more than just color, pass the custom style to the Text child Composable. And if you want to change the overall look and feel of the TextButton beyond Material Design specs, I’d suggest recreating it. All that said, there is not necessarily a best option because it depends on what you are trying to achieve with your design system, but know that Compose gives you the flexibility to do all of these options easily.

[Lukasz Kalnik]

Yes, we set both a custom font and color.

[Lukasz Kalnik]

We were able to achieve it very easily by extending the MaterialTheme and assigning custom `TextStyle`s as needed. The only problem was that the MaterialTheme doesn't differentiate between a Button and TextButton style out-of-the-box.

[Lukasz Kalnik]

Also it's unclear to me how the Button styling actually works.
So I can pass colors to a Button, but won't they get overridden by the theme typography through ProvideTextStyle? What's the precedence here?

[Lukasz Kalnik]

Ok, it looks like it's the other way around - whatever colors I pass to the button explicitly will override the ones from the theme (ProvideTextStyle only provides style for what's missing).

[Chris Sinco [G]]

Yes, ProvideTextStyle is there to make any Text within the Button hierarchy look consistent if the user doesn’t pass an explicit style to them within the contents of the Button. But if you do pass your own style, it will override ProvideTextStyle / CompositionLocal since it’s the closest resolved style in the hierarchy:

Button(onClick = { ... }) {
    Text(style = customStyle)
}

[Chris Sinco [G]]

On the decision to design it this way, @Louis Pullen-Freilich [G] can provide more insight

[Chris Sinco [G]]

There’s also this article written by Louis that actually uses Button as the API design example: https://medium.com/androiddevelopers/pushing-the-right-buttons-in-jetpack-compose-124cb4b17197

[Chris Sinco [G]]

I would also say that the approach with Typography in MaterialTheme is that even though you can put colors in a TextStyle we chose not to since the Material Design spec decouples colors from type