Botones Text, Outlined e Icon
Elija la variante de botón adecuada para cada tarea.
Botones Text, Outlined e Icon es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 2 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.
Buttons Have Personalities
Not every action deserves a bold filled button. Compose offers several button variants, each signaling a different level of emphasis. 🎨
The Filled Button
The standard Button is filled and high-emphasis. It draws the eye, so save it for the one primary action per screen.
Button(onClick = { pay() }) {
Text("Pay now")
}OutlinedButton for Secondary
An OutlinedButton has just a border and no fill. It reads as a clear-but-secondary choice sitting next to a filled one.
OutlinedButton(onClick = { cancel() }) {
Text("Cancel")
}TextButton for Low Emphasis
A TextButton shows only a label, no border or fill. It is perfect for quiet actions like Learn more or dialog choices.
TextButton(onClick = { dismiss() }) {
Text("Not now")
}Emphasis Is a Hierarchy
Think of it as a ladder of emphasis: filled is loudest, outlined is medium, text is quietest. Match the variant to the action's weight.
Icons Inside Buttons
Any button can hold an Icon plus a label in its content row. Add a small spacer so the icon and text do not touch.
Button(onClick = { add() }) {
Icon(Icons.Default.Add, null)
Spacer(Modifier.width(8.dp))
Text("Add")
}The IconButton
An IconButton is a compact, label-free tap target holding just one icon. It is ideal for toolbars and app-bar actions.
IconButton(onClick = { share() }) {
Icon(Icons.Default.Share, "Share")
}Always Describe Your Icon
Give an icon-only button a contentDescription so screen readers can announce it. A null description hides it from accessibility.
IconButton(onClick = { favorite() }) {
Icon(Icons.Default.Favorite, "Favorite")
}FilledIconButton for Emphasis
Need an icon button that stands out? FilledIconButton adds a solid background, raising its emphasis above the plain version.
FilledIconButton(onClick = { record() }) {
Icon(Icons.Default.Mic, "Record")
}Pick the Right Variant
Choosing well guides users: filled for Confirm, outlined for an alternative, text for dismiss, IconButton for tight spaces.
Same onClick, Different Look
Every variant shares the same onClick contract. You change only the visual weight, never how you wire up the action.
Quick Check
You want a quiet, low-emphasis action with only a label and no border or fill.
Recap: Right Tool, Right Tap
You now have a toolbox: filled Button, OutlinedButton, TextButton, and IconButton. Match emphasis to the action and label your icons. ✨
Preguntas frecuentes
¿La lección «Botones Text, Outlined e Icon» es gratis?
Sí — el texto completo de «Botones Text, Outlined e Icon» 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 «Botones Text, Outlined e Icon»?
Elija la variante de botón adecuada para cada tarea. 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 2 de 4.
¿Cuánto tiempo toma la lección «Botones Text, Outlined e Icon»?
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