Skip to content

Extra

BottomAppBar

A FormaUI bottom app bar — navigation and key actions anchored to the bottom of small screens, delegating to Material 3's BottomAppBar.

dev.formaui.components.bottomappbar

actions onlywith embedded FAB

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

FormaBottomAppBar(
    actions = {
        FormaIconButton(onClick = { }) { Text("🔍") }
        FormaIconButton(onClick = { }) { Text("⋮") }
    },
    floatingActionButton = {
        FormaFloatingActionButton(onClick = { }) { Text("+") }
    },
)

FormaBottomAppBar

Bottom bar of icon actions with an optional embedded FAB at the end.

actionsrequiredType@Composable RowScope.() -> UnitDefaultrequiredDescriptionthe bar's icon content, laid out in a RowScope (typically IconButtons).
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the bar.
floatingActionButtonType(@Composable () -> Unit)?DefaultnullDescriptionoptional FAB embedded at the end of the bar (typically a FormaFloatingActionButton).
containerColorTypeColorDefaultFormaBottomAppBarDefaults.containerColorDescriptionthe background color of the bar.
contentColorTypeColorDefaultcontentColorFor(containerColor)Descriptionthe preferred content color, derived from containerColor by default.

Supporting API

FormaBottomAppBarDefaultsobject
Default values used by FormaBottomAppBar; exposes the default containerColor.

Accessibility

The bar is icon-only, so supply a contentDescription on every icon in actions (and on the embedded floatingActionButton's) — without one they announce as unlabelled buttons. Touch targets come from the Material 3 icon buttons placed in actions.