# [CSA03] Pulsa que te pulsa con `Button`

###### tags: `blog`, `compose`, `csa`

La función componible `Button` es un componente con el que interactuar que nos permite lanzar una acción a través del evento de pulsación.

## El botón básico
Esta función crea el botón estandar de Material Design.

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteracionSource = remember {MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults,elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
    
)

- **onClick**: función lanzada al pulsar el botón.
- **modifier**: el modificador aplicado en el botón.
- **enabled**: indica si el botón está o no habilitado.
- **interactionState**:
- **elevation**: elevación del botón.
- **shape**: forma aplicada al fondo del botón.
- **border**: borde aplicado al botón.
- **colors**: selección de colores usados para definir el estilo del botón.
- **contenPadding**: espacio de relleno aplicado al contenido.
- **content**: contenido del botón.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    PoCComposeTheme {
        Button(onClick = { /*TODO*/ }) {
            Text("Púlsame")
        }
    }
}


## Un botón para cada funcionalidad

Aparte de la función estandar, existen varias alternativas vitaminadas que facilitan algunos diseños o implementaciones. Veámos estas funciones.

### OutlinedButton

Un botón con borde exterior pero sin fondo:

OutlinedButton(
    onClick = { /*TODO*/ }
) {
    Text("Púlsame")
}


### TextButton

Es un botón con texto sin elevación ni forma, por lo que lo usaremos básicamente para poder pulsar textos:

TextButton(
    onClick = { /*TODO*/ }
) {
    Text("Púlsame", color = Color.Blue)
}


### IconButton

Es un botón que simplemente es una imagen:

IconButton(onClick = { /*TODO*/ }){
    Icon(
        painter = painterResource(id = R.drawable.ic_launcher_foreground),
        contentDescription = "Icon",
        modifier = Modifier.size(24.dp)
    )
}


### IconToggleButton

Es un botón de icono con dos estados, marcado o no. En este ejemplo hay conceptos más complejos que se explicarán más adelante como `remember`, `mutableStateOf` o `animatedColorAsState`:

var isChecked by remember { mutableStateOf(false) }
IconToggleButton(
    checked = isChecked,
    onCheckedChange = { isChecked = it }){
    val tint by animateColorAsState(if (isChecked) Color.Red else Color.LightGray)
    Icon(
        Icons.Filled.Favorite,
        contentDescription = "Icon",
        tint = tint,
        modifier = Modifier.size(32.dp)
    )
}


## Modifica tus botones

### Color

Uno de los atributos más interesantes de `Button` es `colors`, ya que podemos definir de una manera sencilla los colores usados en el botón en sus diferentes estados. Para darle valor a esta propiedad, debemos hacer uso de la función composable `buttonColors`, que devuelve una interfaz `ButtonColors`:

@Composable
fun buttonColors(
    backgroundColor: Color,
    contentColor: Color,
    disableBackgroundColor: Color,
    disabledContentColor: Color,
)

- **backgroundColor**: es usada como color de fondo del botón
- **contentColor**: color usado para el fondo del contenido
- **disableBackgroundColor** y **disabledContentColor**: los homónimos de los anteriores cuando el botón está deshabilitado

Button(onClick = { /*TODO*/ }, enabled = false, colors = buttonColors(
    backgroundColor = Color.Green,
    contentColor = contentColorFor(backgroundColor = Color.Cyan),
)) {
    Text("Púlsame")
}

 

### Borde

Button(
    onClick = { /*TODO*/ },
    border = BorderStroke(2.dp, Color.Cyan),
    colors = buttonColors(
        backgroundColor = Color.Yellow
    )
) {
    Text("Púlsame", modifier = Modifier.padding(16.dp))
}


### Espacio

Podemos añadir espacio al contenido, por ejemplo aquí podemos ver el padding aplicado al botón (32dp) y el que tiene aplicado el texto (16dp):

Button(
    onClick = { /*TODO*/ },
    contentPadding = PaddingValues(32.dp),
    border = BorderStroke(2.dp, Color.Cyan),
    colors = buttonColors(
        backgroundColor = Color.Yellow,
        contentColor = Color.Blue,
    )
) {
    Text("Púlsame", modifier = Modifier.padding(16.dp))
}


### Forma

Una de las funcionalidades más interesantes en compose es la sencillez para darle formas a los elementos de vista:

Button(
    onClick = { /*TODO*/ },
    contentPadding = PaddingValues(8.dp),
    border = BorderStroke(2.dp, Color.Cyan),
    shape = CutCornerShape(12.dp),
) {
    Text("Púlsame", modifier = Modifier.padding(16.dp))
}


### Contenido

Y por supuesto, podemos no quedarnos en que el contenido sea sólo texto, puede ser compuesto:

Button(
    onClick = { /*TODO*/ },
    contentPadding = PaddingValues(8.dp),
) {
    Icon(
        painter = painterResource(id = R.drawable.ic_launcher_foreground),
        contentDescription = "Icon",
        modifier = Modifier.size(32.dp)
    )
    Spacer(modifier = Modifier.size(ButtonDefaults.IconSize))
    Text("Púlsame")
}