Material 3 Buttons in Jetpack Compose

Get started with Material 3 buttons in Jetpack Compose to create user-friendly interfaces for actions like submitting forms or navigating your app.

Explore Button Styles

Learn to implement five Material 3 button types for different user actions.

Filled Button

Bold button for key actions.

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    // Creates a bold button for primary actions
    Button(
        onClick = { onClick() } // *Required: Function called when the button is clicked
    ) {
        Text("Filled") // *Required: Displays the button label
    }
}
  

Use a Filled Button when you want to emphasize critical actions that drive the main flow of your app.

Examples:

• Submit on a form
• Save in a settings screen
• Confirm in a checkout process

---

Filled Tonal Button

Toned-down button for important actions.

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    // Builds a toned-down button for important actions
    FilledTonalButton(
        onClick = { onClick() } // *Required: Function called when the button is clicked
    ) {
        Text("Tonal") // *Required: Displays the button label
    }
}
  

Use a Filled Tonal Button when you want to highlight an important action, but don’t need the full emphasis of a Filled Button.

Examples:

• Add to Cart inside a product card
• Sign In on a login screen
• Subscribe in a newsletter popup

---

Outlined Button

Bordered button for secondary actions.

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    // Defines a bordered button for secondary actions
    OutlinedButton(
        onClick = { onClick() } // *Required: Function called when the button is clicked
    ) {
        Text("Outlined") // *Required: Displays the button label
    }
}
  

Use an Outlined Button when you want to offer secondary actions that complement a primary button.

Examples:

• Cancel in a dialog
• Back on a form screen
• Reset in a settings menu

---

Elevated Button

Raised button for moderate actions.

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    // Designs a raised button with shadow for moderate emphasis
    ElevatedButton(
        onClick = { onClick() } // *Required: Function called when the button is clicked
    ) {
        Text("Elevated") // *Required: Displays the button label
    }
}
  

Use an Elevated Button when you want to draw attention to actions with moderate importance.

Examples:

• Add in a list view
• Edit on a profile card
• Share in a content preview

---

Text Button

Minimal button for subtle actions.

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    // Implements a minimal text-only button for subtle actions
    TextButton(
        onClick = { onClick() } // *Required: Function called when the button is clicked
    ) {
        Text("Text Button") // *Required: Displays the button label
    }
}
  

Use a Text Button when you want to provide subtle, low-emphasis actions.

Examples:

• Learn More on a landing page
• View Details in a product list
• Skip in an onboarding flow

---

Button Properties

Understand the key properties used in the button examples.

Property	Usage
onClick*	Required: Function called when the button is clicked
content*	Required: Defines the button’s content, like text