Button y onClick
Ejecute código cuando el usuario toque el botón.
Button y onClick es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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. 🎉
Preguntas frecuentes
¿La lección «Button y onClick» es gratis?
Sí — el texto completo de «Button y onClick» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Button y onClick»?
Ejecute código cuando el usuario toque el botón. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Button y onClick»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Button y onClick
- Botones Text, Outlined e Icon
- Estados habilitado, deshabilitado y de carga
- clickable en cualquier Composable