# Extended FAB

> A floating action button with a text label, in four sizes, that collapses to its icon.

- Category: Actions
- API status: Expressive
- Compose APIs: `ExtendedFloatingActionButton`, `SmallExtendedFloatingActionButton`, `MediumExtendedFloatingActionButton`, `LargeExtendedFloatingActionButton`
- Interactive page: https://m3e.ljzapps.app/#components/extended-fab

## When to use

Use an extended FAB when the action needs a label to be understood. Expand it at the top of a screen and collapse it to the icon while the user scrolls down, then expand it again on scroll up.

The text and icon overloads handle the expand and collapse animation. Sizes follow the regular FAB sizes.

## Playground

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

## Examples

### Sizes

```kotlin
SmallExtendedFloatingActionButton(text = { Text("Small") }, icon = { Icon(Icons.Rounded.Edit, contentDescription = null) }, onClick = {})
ExtendedFloatingActionButton(text = { Text("Regular") }, icon = { Icon(Icons.Rounded.Edit, contentDescription = null) }, onClick = {})
MediumExtendedFloatingActionButton(text = { Text("Medium") }, icon = { Icon(Icons.Rounded.Edit, contentDescription = null) }, onClick = {})
LargeExtendedFloatingActionButton(text = { Text("Large") }, icon = { Icon(Icons.Rounded.Edit, contentDescription = null) }, onClick = {})
```

### Collapse and expand

Tap the button.

```kotlin
var expanded by rememberSaveable { mutableStateOf(true) }

ExtendedFloatingActionButton(
    text = { Text("New message") },
    icon = { Icon(Icons.Rounded.Edit, contentDescription = null) },
    expanded = expanded,
    onClick = { expanded = !expanded },
)
```

## Parameters

| Name | Type | Default | Description |
|---|---|---|---|
| `text` | `@Composable () -> Unit` |  | The label. |
| `icon` | `@Composable () -> Unit` |  | The icon, shown in both states. |
| `expanded` | `Boolean` | `true` | When false only the icon remains. |
| `containerColor` | `Color` | `FloatingActionButtonDefaults.containerColor` | Use a container color role. |

## Guidelines

Do:
- Use for the primary action only.
- Collapse on scroll.

Don't:
- Do not use long labels.
- Do not show it with another FAB.

## Accessibility

- Keep the text slot even when collapsed so the action keeps its accessible name.
- The label should start with a verb.

## Related components

- [Floating action button](https://m3e.ljzapps.app/docs/components/fab.md)
- [FAB menu](https://m3e.ljzapps.app/docs/components/fab-menu.md)
- [Buttons](https://m3e.ljzapps.app/docs/components/button.md)