How to make a mini fab in Jetpack Compose

Question

In XML we can make the floating action button in 2 sizes (regular and mini ) like the following

  <com.google.android.material.floatingactionbutton.FloatingActionButton
  ...
  app:fabSize="mini"/>

My Question is how to make mini fab in Compose as the FloatingActionButton implementation as the follow (with no parameter for the size)

@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)?
): Unit

Answer 1

As you can see in the FAB implementation it sets a default size. If you want to change the FAB size, I think the only way is using the Modifier.size(40.dp) .

FloatingActionButton(
    modifier = Modifier.size(40.dp), // 40 is a mini-fab
    onClick = {  }
) {
    Icon(imageVector = Icons.Filled.Add, contentDescription = null)
}

Answer 2

If you use androidx.compose.material3 in your project, you can use SmallFloatingActionButton

@Composable
public fun SmallFloatingActionButton(
    onClick: () → Unit,
    modifier: Modifier,
    interactionSource: MutableInteractionSource,
    shape: Shape,
    containerColor: Color,
    contentColor: Color,
    elevation: FloatingActionButtonElevation,
    content: @Composable
() → Unit
): Unit