Button and onClick
Run code when the user taps.
Button and onClick is a free Jetpack Compose Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Tap, Then React
A button is your app's simplest conversation: the user taps, your code runs. In Compose you express this with the Button composable. 👆
The Button Composable
A Button needs two things: an onClick action and some content to show, usually a Text label inside its trailing lambda.
Button(onClick = { /* do work */ }) {
Text("Tap me")
}onClick Runs on Tap
The onClick lambda runs once each time the button is pressed. Put any plain Kotlin code you want there, like updating a value.
Button(onClick = { count = count + 1 }) {
Text("Add one")
}Content Is a Lambda
Everything between the button's braces is its content. You are not limited to text; any composable can live inside that slot.
Button(onClick = { send() }) {
Text("Send now")
}Wire Up Real State
onClick really shines with state: change a value there and the UI redraws to match the new value automatically.
var liked by remember { mutableStateOf(false) }
Button(onClick = { liked = !liked }) {
Text(if (liked) "Liked" else "Like")
}Call a Function
For tidy code, point onClick at a named function instead of inlining logic. Your UI stays readable and the logic stays testable.
Button(onClick = ::saveProfile) {
Text("Save")
}Buttons Look Filled by Default
A plain Button renders as a filled, high-emphasis button: solid background, contrasting label. It signals the main action on a screen.
One Primary Action
Reserve the filled Button for the single most important action, like Submit or Continue. Too many filled buttons compete for attention.
Empty onClick Does Nothing
An empty onClick lambda compiles fine and the button still ripples, but nothing happens. Always wire it to real behavior. 🤔
Button(onClick = { }) {
Text("Does nothing yet")
}Pass a Modifier
Like most composables, Button accepts a modifier so you can size, pad, or space it within its parent layout.
Button(
onClick = { go() },
modifier = Modifier.fillMaxWidth()
) { Text("Continue") }Tap to Confirm
Think of onClick as the moment of commitment: the user has decided. Use it to save, navigate, or trigger the work they asked for.
Quick Check
You wrote a Button but tapping it does nothing.
Recap: Tap Into Action
You met the Button composable: an onClick lambda for behavior plus a content lambda for its label. Tap, run code, update state. 🎉
Frequently asked questions
Is the “Button and onClick” lesson free?
Yes — the full text of “Button and onClick” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “Button and onClick”?
Run code when the user taps. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Button and onClick” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.