# Bottom app bar

> Puts the most important actions of a screen within thumb reach.

- Category: Navigation
- API status: Expressive
- Compose APIs: `BottomAppBar`, `FlexibleBottomAppBar`, `BottomAppBarDefaults`
- Interactive page: https://m3e.ljzapps.app/#components/bottom-app-bar

## When to use

A bottom app bar holds up to four actions and optionally a FAB. The flexible variant lets you arrange any content with an arrangement, which suits custom action sets.

For many floating actions that do not need a full width bar, use the floating toolbar instead.

## Playground

The interactive page has a playground with live property controls for this component and generated code.

## Examples

### With FAB

```kotlin
BottomAppBar(
    actions = {
        IconButton(onClick = {}) { Icon(Icons.Rounded.Check, contentDescription = "Mark done") }
        IconButton(onClick = {}) { Icon(Icons.Rounded.Edit, contentDescription = "Edit") }
    },
    floatingActionButton = {
        FloatingActionButton(onClick = {}) { Icon(Icons.Rounded.Add, contentDescription = "Add") }
    },
)
```

### Flexible

Free arrangement of actions.

```kotlin
FlexibleBottomAppBar {
    IconButton(onClick = {}) { Icon(Icons.Rounded.Check, contentDescription = "Mark done") }
    IconButton(onClick = {}) { Icon(Icons.Rounded.Edit, contentDescription = "Edit") }
    IconButton(onClick = {}) { Icon(Icons.Rounded.Mic, contentDescription = "Record") }
    IconButton(onClick = {}) { Icon(Icons.Rounded.Delete, contentDescription = "Delete") }
}
```

## Parameters

| Name | Type | Default | Description |
|---|---|---|---|
| `actions` | `@Composable RowScope.() -> Unit` |  | Icon buttons shown at the start. |
| `floatingActionButton` | `@Composable (() -> Unit)?` | `null` | Optional FAB at the end. |
| `horizontalArrangement` | `Arrangement.Horizontal` | `FlexibleHorizontalArrangement` | Flexible bar only. |

## Guidelines

Do:
- Show at most four actions.
- Use it for screen level actions.

Don't:
- Do not combine with a navigation bar.
- Do not use it for navigation between destinations.

## Accessibility

- Every icon needs a content description.
- The bar can hide on scroll. Keep the actions reachable another way for keyboard users.

## Related components

- [Floating toolbar](https://m3e.ljzapps.app/docs/components/floating-toolbar.md)
- [Top app bar](https://m3e.ljzapps.app/docs/components/top-app-bar.md)
- [Floating action button](https://m3e.ljzapps.app/docs/components/fab.md)