Hello :wave: Does anybody know how to make a text ...

# compose

[chiq]

Hello 👋 Does anybody know how to make a text button in compose, pressed state not have background? I tried setting indication=null, but it'll just remove the ripple effect, but there's still a background/highlight when pressed.

TextButton(onClick = { /*TODO*/ }, 
                elevation = null, 
                modifier = Modifier.indication(
                interactionSource = MutableInteractionSource(),
                indication = null
            ),
            ) {
                Text(text = "Default")
            }

[Casey Brooks]

Are you basically just looking for clickable text, without any extra styling? A Button is basically just a Surface with styling around Text(), so you might just want to set your text style/color and use Modifier.clickable on a Text() instead of TextButton().

You can see the source of Button and TextButton, which may help you in getting the right fonts/sizing to create your own custom text button with only the things you want

[Casey Brooks]

And this general pattern is true of pretty much everything in the Compose APIs. The material UI widgets are opinionated and built to the fairly rigid specifications of Material Design. But they’re all just pretty small wrappers over more generic Composable functions, and you’re free to drop down to that lower level to create the specific widgets you need. This idea is outlined in the documentation page forArchitectural Layering

[Chris Fillmore]

Are you passing buttonColors?

I’m not actually sure this solves the problem of background color in pressed state, but take a look.
https://developer.android.com/reference/kotlin/androidx/compose/material/ButtonColors

[chiq]

I'm using the default which should be transparent, I looked at the source code of Surface which is used by Buttons, they're the ones that's propagating the highlight color even when you set indicator= null. I might go with the custom Text Button implementation that doesn't use Surface 😬

[Chris Fillmore]

I don’t think a custom solution is necessary, you can modify the background color as part of the theme

[Chris Fillmore]

Rather than being a parameter you pass, it’s a composition local… I think

[chiq]

It's not the background color that im worried about, its the highlight when you pressed a Text Button

[Chris Fillmore]

Sorry what do you mean “highlight”?

[Chris Fillmore]

Is it an outline?

[Chris Fillmore]

Your question said

pressed state not have background

Maybe I misunderstood

[Chris Fillmore]

You can remove the background of the pressed state by setting the color to Color.Transparent. And I think you can do this via a local theme

[chiq]

Yeah sorry for the confusion, I found the culprit though, its the Surface composable that adding ripple effect on top. So to achieve what I want for my Text Button, I need to not use TextButton and make a custom one 🙂 But thanks y'all

[Chris Fillmore]

You can remove the ripple without implementing a custom button. This would also save you from having to implement button semantics (for e.g. screen readers), and minimum touch target, etc.

[Chris Fillmore]

I say this because I recently had your exact problem where I wanted to customize the ripple on a TextButton

[Chris Fillmore]

You can modify the ripple locally doing this

@Composable
fun ProvideSecondaryRippleTheme(content: @Composable () -> Unit) {
  CompositionLocalProvider(
    LocalRippleTheme provides SecondaryRippleTheme,
    content = content,
  )
}

@Immutable
private object SecondaryRippleTheme : RippleTheme {
  @Composable
  override fun defaultColor(): Color {
    return RippleTheme.defaultRippleColor(
      // Use whatever colors you want here
      contentColor = MaterialTheme.colors.onSurface,
      lightTheme = MaterialTheme.colors.isLight,
    )
  }

  @Composable
  override fun rippleAlpha(): RippleAlpha {
    return RippleTheme.defaultRippleAlpha(
      // Use whatever colors you want here
      contentColor = MaterialTheme.colors.onSurface,
      lightTheme = MaterialTheme.colors.isLight,
    )
  }
}

And use it like this:

@Composable
fun SecondaryTextButton(
  onClick: () -> Unit,
  content: @Composable RowScope.() -> Unit,
) {
  ProvideSecondaryRippleTheme {
    TextButton(
      ...
    )
  }
}