Material 3 Floating Action Buttons in Jetpack Compose

Get started with Material 3 floating action buttons in Jetpack Compose to create user-friendly interfaces for primary actions like creating or navigating.

Explore FAB Styles

Learn to implement four Material 3 FAB types for key user actions.

FAB

Standard button for primary actions.

@Composable
fun Example(onClick: () -> Unit) {
    // Creates a standard FAB for primary actions
    FloatingActionButton(
        onClick = { onClick() } // *Required: Function called when the button is clicked
    ) {
        Icon(Icons.Filled.Add, "Floating action button.") // *Required: Displays the button icon
    }
}
  

Use a FAB when you want to highlight a primary action that drives the main flow of your app.

Examples:

• Create a new note in a note-taking app
• Add a contact in a chat app
• Center the map on a user’s location

---

Small FAB

Compact button for primary actions.

@Composable
fun SmallExample(onClick: () -> Unit) {
    // Builds a compact FAB for primary actions
    SmallFloatingActionButton(
        onClick = { onClick() } // *Required: Function called when the button is clicked
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.") // *Required: Displays the button icon
    }
}
  

Use a Small FAB when you want a less intrusive primary action in a compact space.

Examples:

• Create a quick note in a note-taking app
• Add an item in a crowded interface
• Pin a location on a map

---

Large FAB

Larger button for prominent actions.

@Composable
fun LargeExample(onClick: () -> Unit) {
    // Designs a larger FAB for prominent actions
    LargeFloatingActionButton(
        onClick = { onClick() } // *Required: Function called when the button is clicked
    ) {
        Icon(Icons.Filled.Add, "Large floating action button") // *Required: Displays the button icon
    }
}
  

Use a Large FAB when you want to make a primary action stand out more prominently.

Examples:

• Create a new post in a social media app
• Add a contact in a messaging app
• Start navigation in a map app

---

Extended FAB

Wide button with icon and text for clear actions.

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    // Creates a wide FAB with icon and text for clear actions
    ExtendedFloatingActionButton(
        onClick = { onClick() }, // *Required: Function called when the button is clicked
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, // *Required: Displays the button icon
        text = { Text("Extended FAB") } // *Required: Displays the button label
    )
}
  

Use an Extended FAB when you want a clear primary action with both an icon and text.

Examples:

• Compose a message in an email app
• Create Event in a calendar app
• Add Note in a note-taking app

---

FAB Properties

Understand the key properties used in the FAB examples.

Property	Usage
onClick*	Required: Function called when the FAB is clicked
content*	Required: Defines the FAB’s content, typically an icon (used in FAB, Small FAB, Large FAB)
icon*	Required: Displays the icon for the Extended FAB
text*	Required: Displays the text label for the Extended FAB