Jetpack Compose: How to avoid Button Text disappearing when Button size is small?

Question

I am trying to create a custom button that is small and can show a numerical value between 0 and 99 as Text. Depending on the fontsize the Text disappears from the Button when the size of the Button is set too low, even though there still is space. How do I pass these limits and show the numbers inside the Button despite the small size?

This is my current code:

Button(
    onClick = { /*TODO*/ },
    shape = CircleShape,
    modifier = Modifier
        .size(20.dp)
) {
    Text(
        text = "23",
        fontSize = 7.sp,
    )
}

At this Button size the text disappears.

Answer 1

The Button has a default contentPadding which is applied internally between the container and the content.
The default values (ButtonDefaults.ContentPadding) are:

private val ButtonHorizontalPadding = 16.dp
private val ButtonVerticalPadding = 8.dp

You can override it adding something like contentPadding = PaddingValues(0.dp) to the Button:

Button(
    onClick = { /*TODO*/ },
    shape = CircleShape,
    modifier = Modifier
        .size(20.dp),
    contentPadding = PaddingValues(0.dp)
) {
    Text(
        text = "23",
        fontSize = 7.sp,
    )
}