Buttons and click handling

Where a poster becomes an app

Everything so far has been a picture. Text, colours, layouts — beautiful, and utterly inert. A Button is the first thing you have written that lets the person holding the phone change something.

1Button(onClick = { score++ }) {
2    Text(text = "Roll")
3}

That is a complete, styled, ripple-animated, accessible Material 3 button. Look closely at its shape, though, because it is stranger than it looks: there are two sets of braces, and they do completely different jobs.

Two lambdas, two jobs

1Button(
2    onClick = { score++ },
3    modifier = Modifier.fillMaxWidth()
4) {
5    Text(text = "Roll")
6}

• onClick is a lambda of type () -> Unit: takes nothing, gives nothing back, runs when tapped. Compose stores it and calls it later.
• The trailing braces are the content parameter — and it is a composable lambda. Whatever you put in there is drawn inside the button.

The second one is called a slot. Button does not have a text parameter, deliberately. Instead it leaves a hole and lets you fill it with any composables you like:

1Button(onClick = onRoll) {
2    Icon(
3        imageVector = Icons.Default.Refresh,
4        contentDescription = null
5    )
6    Spacer(Modifier.width(8.dp))
7    Text(text = "Roll")
8}

The content of a Button is laid out as a Row, so those three things sit side by side and centred without you asking. Slots appear everywhere in Material 3 — cards, dialogs, top bars, the lot — and they are why the library is flexible without having forty parameters per composable.

The mistake everyone makes once

1Button(onClick = roll()) {   // wrong
2    Text(text = "Roll")
3}

That does not compile, and the error is worth reading slowly:

1e: Type mismatch: inferred type is Unit
2   but () -> Unit was expected

roll() — with brackets — calls the function immediately and hands Button whatever it returned, which is nothing. Button did not want a result. It wanted the function itself, to keep for later.

Three ways to write it correctly:

1Button(onClick = { roll() })  // a lambda calling it
2Button(onClick = ::roll)      // a function reference
3Button(onClick = onRoll)      // a lambda passed in

If it helps, read onClick = { roll() } as "when clicked, then roll", and onClick = roll() as "roll right now, and give the button the leftovers". Only one of those is a plan.

Five buttons, in order of loudness

Material 3 gives you a ladder of emphasis. Using the right rung is most of what makes a screen look professionally designed.

They all take exactly the same parameters, so swapping one for another is a one-word edit.

The rule: one filled Button per screen. If everything shouts, nothing does.

Making it yours

1@Composable
2fun RollControls(
3    rolling: Boolean,
4    onRoll: () -> Unit,
5    onReset: () -> Unit
6) {
7    Row(
8        horizontalArrangement =
9            Arrangement.spacedBy(12.dp),
10        verticalAlignment = Alignment.CenterVertically
11    ) {
12        Button(
13            onClick = onRoll,
14            enabled = !rolling,
15            shape = RoundedCornerShape(18.dp),
16            contentPadding = PaddingValues(
17                horizontal = 30.dp,
18                vertical = 14.dp
19            ),
20            colors = ButtonDefaults.buttonColors(
21                containerColor = Color(0xFF5B3FD6),
22                contentColor = Color.White
23            )
24        ) {
25            Text(text = "Roll")
26        }
27        TextButton(onClick = onReset) {
28            Text(text = "Reset")
29        }
30    }
31}

Making anything tappable

Not everything that responds to a tap should look like a button. In Dice Duel, the die itself is the button:

1Canvas(
2    modifier = modifier
3        .size(size)
4        .shadow(14.dp, shape)
5        .clickable { onRoll() }
6) {
7    drawDie(value)
8}

Modifier.clickable { } adds tap handling — plus a ripple and the right accessibility behaviour — to absolutely any composable. Remember the chain rule from Lesson 3.3: put .clickable early so the padding around your content is tappable too, not just the content itself.

For an icon on its own, prefer IconButton, which gives you a 48dp tap target for free — the minimum size a finger can reliably hit:

1IconButton(onClick = onDelete) {
2    Icon(
3        imageVector = Icons.Default.Delete,
4        contentDescription = "Delete note"
5    )
6}

That contentDescription is not optional politeness. It is the only thing a screen reader has to announce, and without it the button is a silent mystery. Lesson 6.3 goes further.

1var showDialog by remember { mutableStateOf(false) }
2
3Button(onClick = { showDialog = true }) {
4    Text(text = "Delete")
5}
6if (showDialog) {
7    ConfirmDialog(
8        onDismiss = { showDialog = false }
9    )
10}