Botón

Los botones son componentes fundamentales que le 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 dónde debes usarlos.

Tipo

Apariencia

Propósito

Filled

Fondo sólido con texto contrastante.

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

Tonal con relleno

El color de fondo varía según la superficie.

También para acciones principales o importantes. Los botones rellenos proporcionan más peso visual y funciones de traje como “agregar al carrito” y “Acceder”.

Alta

Se destaca por tener una sombra.

Se ajusta a 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 que son 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 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 del botón, con sus características únicas destacadas.
Figura 1: Los cinco componentes del botón.

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 parezca inactivo y no disponible.
  • 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 con relleno

El componente del botón relleno usa el elemento componible Button básico. Se rellena 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 se muestra de la siguiente manera:

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

Botón tonal relleno

El componente del botón tonal relleno 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 se muestra de la siguiente manera:

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

Botón con contorno

El componente de botón delineado usa el elemento componible OutlinedButton. 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 muestra de la siguiente manera:

Un botón con contorno transparente con 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 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 con contorno 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 se muestra 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 componible TextButton. Hasta que no se presiona, aparece solo como texto. No tiene 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 se muestra de la siguiente manera:

Un botón de texto que dice “Botón de texto”
Figura 6: Un botón de texto

Recursos adicionales