https://kotlinlang.org logo
Title
l

Lukasz Kalnik

02/02/2022, 4:49 PM
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
.
j

Joseph Hawkes-Cates

02/02/2022, 4:53 PM
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.
c

Chris Sinco [G]

02/02/2022, 4:55 PM
l

Lukasz Kalnik

02/02/2022, 4:57 PM
But isn't the text style "hardcoded" in the
Button
composable?
That means it will always take
typography.button
and I cannot have different typographies for a
TextButton
and a button with filled background.
c

Chris Sinco [G]

02/02/2022, 4:58 PM
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
l

Lukasz Kalnik

02/02/2022, 5:00 PM
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.
Maybe the best option is to create a custom
TextButton
with the appropriate color.
j

Joseph Hawkes-Cates

02/02/2022, 5:01 PM
I’ve accomplished this by wrapping my buttons in my own composable that provides the common styles I want
1
l

Lukasz Kalnik

02/02/2022, 5:01 PM
Yes, looks like that's the best way.
Thank you all for your quick and helpful answers! 🙏
c

Chris Sinco [G]

02/02/2022, 5:02 PM
Yes, that is what I would suggest. The beauty of Compose is easily being able to wrap things and customize for reuse
🙌 3
FWIW
MaterialTheme.typography.button
doesn’t have a color in the style
l

Lukasz Kalnik

02/02/2022, 5:10 PM
But we override it with a TextStyle which has a color.
c

Chris Sinco [G]

02/02/2022, 5:19 PM
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.
l

Lukasz Kalnik

02/02/2022, 5:25 PM
Yes, we set both a custom font and color.
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.
✔️ 1
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?
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).
c

Chris Sinco [G]

02/02/2022, 11:25 PM
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)
}
On the decision to design it this way, @Louis Pullen-Freilich [G] can provide more insight
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
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