Botón

Los botones son componentes fundamentales que permiten al usuario activar una acción definida. Hay cinco tipos de botones. En la siguiente tabla, se describe el aspecto de cada uno de los cinco tipos de botones, así como la ubicación en la que debes usarlos.

Tipo

Apariencia

Propósito

Filled

Fondo sólido con texto que contraste.

Botones de énfasis alto. Estas son para las acciones principales en una solicitud, como "enviar" y "guardar". El efecto de sombra enfatiza la importancia del botón.

Tonal relleno

El color de fondo varía para coincidir con la superficie.

También para acciones principales o importantes. Los botones con relleno proporcionan un peso más visual y funciones de adaptación como «agregar al carrito» y «Acceder».

Alta

Se destaca por tener una sombra.

Tiene un rol similar a los botones tonales. Aumenta la elevación para que el botón se destaque aún más.

Outlined

Incluye un borde sin relleno.

Botones de énfasis medio, que contienen acciones importantes pero no principales. Se vinculan bien con otros botones para indicar acciones secundarias alternativas, como «Cancelar» o «Atrás».

Texto

Muestra texto sin fondo ni borde.

Botones de bajo énfasis, ideales para acciones menos importantes, 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 de Material Design.

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

Plataforma de API

  • onClick: Es la función a la que se llama cuando el usuario presiona el botón.
  • enabled: Cuando es falso, este parámetro hace que el botón aparezca inactivo y no disponible.
  • colors: Es una instancia de ButtonColors que determina los colores que se usan en el botón.
  • contentPadding: El padding dentro del botón

Botón relleno

El componente del botón completado usa el elemento componible Button básico. Se llena con un color sólido de forma predeterminada. 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 aparece de la siguiente manera:

Un botón relleno con un fondo púrpura que dice "relleno".
Figura 2: Un botón con relleno

Botón tonal relleno

El componente del botón tonal completado usa el elemento componible FilledTonalButton. Se rellena con un color tonal de forma predeterminada.

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 aparece de la siguiente manera:

Un botón tonal con un fondo de color púrpura claro que dice "relleno".
Figura 3: Un botón tonal

Botón con contorno

El componente del botón descrito usa el elemento componible OutlinedButton. Aparecerá 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 aparece de la siguiente manera:

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

Botón con relieve

El componente de botón elevado usa el elemento componible ElevatedButton. Tiene una sombra que representa el efecto de elevación de forma predeterminada. Ten en cuenta que, en esencia, es un botón delineado con 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 aparece de la siguiente manera:

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

Botón de texto

El componente del botón de texto usa el elemento componible TextButton. Hasta que lo presionas, aparece como solo texto. No tienen un relleno o contorno sólido de forma predeterminada.

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 aparece de la siguiente manera:

Un botón de texto que dice "Text Button" (Botón de texto)
Figura 6: Un botón de texto.

Recursos adicionales