How to remove padding from Text button?

Question

I am trying to remove padding from TextButton but it wont work.

TextButton(
    onClick = {},
    modifier = Modifier.padding(0.dp)
) {
    Text(
        " ${getString(R.string.terms_and_conditions)}",
        color = MaterialTheme.colors.primary,
        fontFamily = FontFamily(Font(R.font.poppins_regular)),
        fontSize = 10.sp,
    )
}

I have tried setting the height and size in Modifier property as well but the padding is still present

Answer 1

Wrap the TextButton with CompositionLocalProvider to override the value of LocalMinimumTouchTargetEnforcement. This will only remove the extra margin but will not modify the defaultMinSize which is hardcoded.

CompositionLocalProvider(
    LocalMinimumTouchTargetEnforcement provides false,
) {
    TextButton(
        onClick = {},
        contentPadding = PaddingValues(),
    ) {
        Text(
            "Button",
            color = MaterialTheme.colors.primary,
            fontSize = 10.sp,
        )
    }
}

Answer 2

You cannot reduce padding with the padding modifier: it always adds an extra padding on top of the existing padding. See this reply for more details about the order of modifiers.

You can reduce TextButton padding with contentPadding argument, by specifying PaddingValues(0.dp), but this will not fully remove the padding.

If you need fully remove the padding, you can use the clickable modifier instead:

Text(
    "getString(R.string.terms_and_conditions",
    color = MaterialTheme.colors.primary,
    fontFamily = FontFamily(Font(R.font.neris_semi_bold)),
    fontSize = 10.sp,
    modifier = Modifier
        .clickable {
            // onClick()
        }
)

If you want to change the color of the ripple, as is done in TextButton, you can do it as follows:

.clickable(
    interactionSource = remember { MutableInteractionSource() },
    indication = rememberRipple(color = MaterialTheme.colors.primary),
) {
    
}