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.
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 deButtonColors
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") } }
Esta implementación se muestra de la siguiente manera:
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") } }
Esta implementación se muestra de la siguiente manera:
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") } }
Esta implementación se muestra de la siguiente manera:
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") } }
Esta implementación se muestra de la siguiente manera:
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") } }
Esta implementación se muestra de la siguiente manera: