What causes Button to add extra height to containers?

Question

I'm working on a non-standard button that is deliberately small. I want the row to only be as tall as the text in the children. I'd like text to precede the button horizontally and for the button to have a text-only appearance. TextButton, however, appears to add extra padding to the parent Row's parent. I've tried many combinations of height(IntrinsicSize), defaultMinSize, heightIn, wrapContentSize, and other modifiers. Notice the button background extending beyond the Row's height (the selected element in the preview) in screenshot demonstrating the problem:

The only solution appears to be setting an explicit height(Dp). The problem with this solution to me is that it will not react appropriately to system-level text scaling.

@Composable
fun Test() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Text("Here is a linky button:")

        TextButton(
            onClick = { },
            modifier = Modifier
                .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp)
                .background(Color.Cyan),
            contentPadding = PaddingValues(0.dp),
        ) {
            Text("Linky Button")
        }
    }
}

So in total, I have two questions:

1. Where is the extra height coming from?
2. Is there a more flexible solution than setting an explicit .height(Dp)?

Answer 1

You are using TextButton which is a Material component.
Material design has specifications to have minimum dimensions for clickable components. So, there is padding added for that.

If you need a clickable text, you can use ClickableText or any composable with Modifier.clickable to fit your use-case.