Button

Los botones son componentes fundamentales que permiten al usuario activar una acción definida. Existen cinco tipos de botones. En la siguiente tabla, se describe la apariencia de cada uno de los cinco tipos de botones, así como dónde debes 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 enfatiza 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 completados 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 rol 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 la siguiente 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: Es la función que se llama cuando el usuario presiona el botón.
  • enabled: Cuando es falso, este parámetro hace que el botón aparezca como no disponible e inactivo.
  • colors: Es 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 siguiente 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 morado 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 "filled".
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 oscuros que dice "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. Ten en cuenta que es, básicamente, un botón con contorno y 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. Hasta que se presiona, aparece solo como texto. 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