Button
Los botones son componentes fundamentales que permiten al usuario activar una acción definida acción. Hay 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 coincidir 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 por tener una sombra. |
Tiene 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 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 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.
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 deButtonColorsque determina los colores que se usan en el botón.contentPadding: El padding dentro del botón
Botón relleno
El componente del botón completado usa el elemento componible Button básico. Sí
se rellenará 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")
}
}
Esta implementación aparece de la siguiente manera:
Botón tonal relleno
El componente del botón tonal completado 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 aparece de la siguiente manera:
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")
}
}
Esta implementación aparece de la siguiente manera:
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")
}
}
Esta implementación aparece de la siguiente manera:
Botón de texto
El componente del 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")
}
}
Esta implementación aparece de la siguiente manera:
