Botón

Los botones son componentes fundamentales que permiten al usuario activar una acción definida. Existen cinco tipos de botones. En esta tabla, se describe el aspecto de cada uno de los cinco tipos de botones, así como dónde debes usarlos:

Tipo Apariencia Objetivo
Rellenado Fondo liso con texto en contraste. Botones de énfasis alto Se usan para las acciones principales de una aplicación, como "enviar" y "guardar". El efecto de sombra destaca la importancia del botón.
Tonal con relleno El color de fondo varía para que coincida con la superficie. También para acciones principales o significativas. Los botones tonales rellenos proporcionan más peso visual y se adaptan a funciones como "Agregar al carrito" y "Acceder".
Alta Se destaca por tener una sombra. Tienen un propósito similar al de los botones tonales. Aumenta la elevación para que el botón se destaque aún más.
Con contorno 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 alternativas y secundarias, como "Cancelar" o "Atrás".
Texto Muestra texto sin fondo ni borde. Son 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 esta 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.

Superficie de la API

onClick
Es la función a la que llama el sistema cuando el usuario presiona el botón.
enabled
Cuando es false, 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 relleno usa el elemento componible básico Button. De forma predeterminada, se rellena con un color sólido. En el fragmento, se muestra cómo implementar el componente y obtener una vista previa de forma interactiva:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}

Botón tonal relleno

El componente de botón tonal relleno usa el elemento componible FilledTonalButton. De forma predeterminada, se completa con un color tonal.

En el fragmento, se muestra cómo implementar el componente y obtener una vista previa de él de forma interactiva:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}

Botón con contorno

El componente de botón con contorno usa el elemento componible OutlinedButton. De forma predeterminada, aparece con un contorno.

En el fragmento, se muestra cómo implementar el componente y obtener una vista previa de él de forma interactiva:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}

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. Es un botón relleno que incluye una sombra.

En el fragmento, se muestra cómo implementar el componente y obtener una vista previa de él de forma interactiva:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}

Botón de texto

El componente de botón de texto usa el elemento componible TextButton. Aparece solo como texto hasta que se presiona. No tiene un relleno ni un contorno sólidos de forma predeterminada.

En el fragmento, se muestra cómo implementar el componente y obtener una vista previa de él de forma interactiva:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}

Recursos adicionales