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.

Frogfish

Well you could adjust the font-size as a function of the length of the text – Starch

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

Injudicious

The answer to this sort of question always seems to be along the lines of "because the Material Design team made a bad decision and now it's our problem" XD Never ever thought I'd miss the XML system :\ – Gloss