# [CSA04] No nos olvidamos de los botones flotantes `FAB`

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

## La función `FloatingActionButton`

Un `FAB` es un componente importante desde hace unos años en las aplicaciones, debido a que es usado habitualmente para mostrar acciones principales que pueden ser llevadas a cabo en la pantalla. Compose nos permite crear de manera más flexible los `FABs` con respecto a los diseños XML.

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable () -> Unit
)

- **onClick**: función lanzada al pulsar el FAB.
- **modifier**: el modificador aplicado en el FAB.
- **interactionState**:diferentes estados que pueden ser representados por el FAB con las diferentes interacciones del usuario.
- **shape**: forma aplicada al fondo del FAB.
- **backgroundColor**: color de fondo del FAB.
- **contentColor**: color del contenido del FAB.
- **elevation**: elevación del FAB.
- **content**: contenido del FAB.

Un ejemplo de uso, usando varios de los parámetros:

 FloatingActionButton(
    onClick = { /*TODO*/ },
    modifier = Modifier.padding(2.dp),
    backgroundColor = Color.Yellow,
    elevation = elevation(20.dp),
    shape = CutCornerShape(8.dp)){
        Icon(Icons.Filled.Favorite,
            contentDescription = "Icon")
    }


## La función `ExtendedFloatingActionButton`

Es un componente muy particular, usado para mostrar texto además del icono de acción típico de un FAB. Además, no tiene parámetro `content` clásico en Compose, sino que lo sustituye por text, donde incluiremos el contenido.

 ExtendedFloatingActionButton(text = {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Icon(
            Icons.Filled.Favorite,
            contentDescription = "Icon"
        )
        Spacer(modifier = Modifier.size(4.dp))
        Text(text = "Favorito")
    }
}, onClick = { /*TODO*/ })