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 el aspecto 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 en contraste

Botones de énfasis alto. Se usan para acciones principales en una aplicación, 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 significativas. Los botones rellenos proporcionan más peso visual y se adaptan a funciones como "Agregar al carrito" y "Acceder".

Alta

Se destaca porque tiene una sombra.

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

Outlined

Tiene 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 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 de botón, con sus características únicas destacadas.
Figura 1: Los cinco componentes de botones.

Plataforma de la 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: Es el padding dentro del botón.

Botón relleno

El componente de botón relleno usa el elemento componible básico Button. 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 morado que dice "lleno".
Figura 2: Un botón relleno.

Botón tonal relleno

El componente del botón tonal completado usa el elemento componible FilledTonalButton. De forma predeterminada, se completa 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 aparece de la siguiente manera:

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

Botón con contorno

El componente de botón con contorno usa el elemento componible OutlinedButton. Aparece con un esquema 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 un contorno oscuro que dice "Outlined".
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 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 de botón de texto usa el elemento componible TextButton. Hasta que lo presionas, aparece como solo texto. No tiene un relleno ni un contorno sólidos 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"
Figura 6: Un botón de texto.

Recursos adicionales