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

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),
) {
    
}

Answer 2

You can achieve it changing the contentPadding and applying a fixed size:

TextButton(
    onClick = {},
    contentPadding = PaddingValues(0.dp),
    modifier = Modifier.height(20.dp).width(40.dp)
) {
    Text(
        "Button",
        color = MaterialTheme.colors.primary,
        fontSize = 10.sp,
    )
}

Answer 3

If you come across unwanted margins. When you use onclick in any Button function, it sets propagateMinConstraints = true inside the view's surface - this will apply to unwanted margins. Example how solve this problem:

@Composable
fun ButtonWithoutOuterPadding(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    elevation: Dp = 0.dp,
    color: Color = Color.Transparent,
    border: BorderStroke? = null,
    contentAlignment: Alignment = Alignment.Center,
    content: @Composable () -> Unit
) {
    Box(
        modifier
            .shadow(elevation, shape, clip = false)
            .then(if (border != null) Modifier.border(border, shape) else Modifier)
            .background(
                color = color,
                shape = shape
            )
            .clip(shape)
            .then(
                Modifier.clickable(
                    interactionSource = remember { MutableInteractionSource() },
                    indication = LocalIndication.current,
                    enabled = true,
                    onClickLabel = null,
                    role = null,
                    onClick = onClick
                )
            ),
        contentAlignment = contentAlignment,
        propagateMinConstraints = false
    ) {
        content()
    }
}

Answer 4

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,
        )
    }
}