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 describen las de cada uno de los cinco tipos de botones, y dónde deberías usar de ellos.

Tipo

Aspecto

Propósito

Filled

Fondo sólido con texto que contraste.

Botones de énfasis alto. Son para 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 que coincida con la superficie.

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

Alta

Se destaca porque tiene una sombra.

Cumple una función similar a la de los botones tonales. Aumenta la elevación para que el botón se destaque aún más.

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 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 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 relleno usa el elemento componible básico Button. Se completa con un color sólido de forma predeterminada. El siguiente fragmento demuestra 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 del botón descrito usa el elemento componible OutlinedButton. Integra 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 es básicamente 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 se presione, para que parezca que es 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