Botón

palabras clave: AiAssisted, producto:JetpackCompose

Los botones son componentes fundamentales que permiten al usuario activar una acción definida. Existen cinco tipos de botones. En esta tabla, se describe la apariencia de cada uno de los cinco tipos de botones, así como dónde deberías usarlos:

Tipo Aspecto Propósito
Filled Fondo sólido con texto contrastante. Botones de énfasis alto Se usan para las acciones principales de una aplicación, como "enviar" y "guardar". El efecto de sombra destaca la importancia del botón.
Tonal con relleno El color de fondo varía para coincidir con la superficie. También para acciones principales o significativas. Los botones tonales rellenos proporcionan más peso visual y son adecuados para funciones como "Agregar al carrito" y "Acceder".
Alta Se destaca por tener una sombra. Cumple un propósito similar al de los botones tonales. Aumenta la elevación para que el botón se vea aún más destacado.
Outlined Presenta un borde sin relleno. Botones de énfasis medio que contienen acciones importantes, pero no principales. Se combinan bien con otros botones para indicar acciones secundarias alternativas, como "Cancelar" o "Atrás".
Texto Muestra texto sin fondo ni borde. Botones de baja importancia, ideales para acciones menos críticas, como vínculos de navegación o funciones secundarias, como "Más información" o "Ver detalles".

En esta imagen, se muestran los cinco tipos de botones en Material Design:

Un ejemplo de cada uno de los cinco componentes de botón, con sus características únicas destacadas.
Figura 1: Los cinco componentes de botón.

Superficie de la API

onClick
Función a la que llama el sistema cuando el usuario presiona el botón.
enabled
Cuando es false, este parámetro hace que el botón aparezca como no disponible e inactivo.
colors
Una instancia de ButtonColors que determina los colores que se usan en el botón.
contentPadding
Es el padding dentro del botón.

Botón relleno

El componente de botón completado usa el elemento Button componible básico. De forma predeterminada, se rellena con un color sólido. En el fragmento, se muestra cómo implementar el componente:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Esta implementación se ve de la siguiente manera:

Un botón relleno con un fondo violeta que dice "Relleno".
Figura 2. Un botón con relleno.

Botón tonal relleno

El componente de botón tonal con relleno usa el elemento FilledTonalButton componible. De forma predeterminada, se rellena con un color tonal.

En el siguiente fragmento, se muestra cómo implementar el componente:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Esta implementación se ve de la siguiente manera:

Un botón tonal con un fondo púrpura claro que dice "Tonal".
Figura 3. Un botón tonal.

Botón con contorno

El componente de botón esquematizado usa el elemento OutlinedButton componible. Aparece con un contorno de forma predeterminada.

En el siguiente fragmento, se muestra cómo implementar el componente:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Esta implementación se ve de la siguiente manera:

Un botón transparente con un contorno y un borde oscuro que dice "Con contorno".
Figura 4: Un botón con contorno.

Botón elevado

El componente de botón elevado usa el elemento ElevatedButton componible. De forma predeterminada, tiene una sombra que representa el efecto de elevación. Es un botón relleno que incluye una sombra.

En el siguiente fragmento, se muestra cómo implementar el componente:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Esta implementación se ve de la siguiente manera:

Un botón elevado con un fondo gris que dice "Elevated".
Figura 5: Un botón elevado.

Botón de texto

El componente de botón de texto usa el elemento TextButton componible. Aparece solo como texto hasta que se presiona. De forma predeterminada, no tiene un relleno ni un contorno sólidos.

En el siguiente fragmento, se muestra cómo implementar el componente:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Esta implementación se ve de la siguiente manera:

Un botón de texto que dice "Botón de texto"
Figura 6. Un botón de texto.

Recursos adicionales