How to Use Material 3 Buttons

Overview

Material 3 buttons are essential interactive components in Android UIs, triggering defined actions. 

Available in five variants - Filled, Tonal, Elevated, Outlined, and Text, they cater to different priorities and visual styles. This guide demonstrates how to implement them using Jetpack Compose, with accessibility tips and theming for 2025.

Button Types Table

Type	Usage Examples
Filled	Submit, Save, Confirm, Buy Now, Checkout, Send, Pay, Book, Order, Register Now, Login, Apply Now
Tonal	Add to Cart, Sign In, Register, Join, Subscribe, Update, Edit, Share, Connect, Follow, Download, View Profile
Elevated	Proceed, Next, Apply, Start, Continue, Finish, Launch, Create, Approve, Submit Form, Upgrade, Save Changes
Outlined	Cancel, Back, Reset, Decline, Undo, Close, Remove, Delete, Skip, Discard, Exit, Retry
Text	Learn More, View Details, Read More, Skip, Visit, Explore, Browse, See All, Contact, Help, About, Settings

Version Compatibility & Dependencies

This implementation requires a minimum SDK of API level 21 (Android 5.0). Add the Material 3 library to your project:

dependencies {
    implementation 'androidx.compose.material3:material3:1.3.0'
}
    

Ensure your app uses a Material 3 theme, such as Theme.Material3.*. Refer to the Material 3 Button Guidelines for details.

Creating Material 3 Buttons in Jetpack Compose

Filled Button Example

Uses Button composable with a solid background.

import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun FilledButtonExample() {
    Button(onClick = { /* Handle click */ }) {
        Text("Submit")
    }
}
    

Result: A filled button with a solid purple background.

---

Tonal Button Example

Uses FilledTonalButton composable with a tonal fill.

import androidx.compose.material3.FilledTonalButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun TonalButtonExample() {
    FilledTonalButton(onClick = { /* Handle click */ }) {
        Text("Add to Cart")
    }
}
    

Result: A tonal button with a light purple background.

---

Elevated Button Example

Uses ElevatedButton composable with a shadow effect.

import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun ElevatedButtonExample() {
    ElevatedButton(onClick = { /* Handle click */ }) {
        Text("Proceed")
    }
}
    

Result: An elevated button with a gray background and shadow.

---

Outlined Button Example

Uses OutlinedButton composable with a border.

import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun OutlinedButtonExample() {
    OutlinedButton(onClick = { /* Handle click */ }) {
        Text("Cancel")
    }
}
    

Result: A transparent button with a dark border.

---

Text Button Example

Uses TextButton composable with no background or border.

import androidx.compose.material3.TextButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun TextButtonExample() {
    TextButton(onClick = { /* Handle click */ }) {
        Text("Learn More")
    }
}
    

Result: A text-only button.

Key Points for Implementation

• onClick: Defines the action triggered when the button is pressed.
• enabled: Set to false to disable the button, making it visually inactive.
• colors: Use ButtonDefaults to customize button colors (e.g., ButtonDefaults.buttonColors).
• contentPadding: Adjust padding within the button using PaddingValues.
• Accessibility: Ensure buttons have a 48dp touch target and use semantics for screen reader support (e.g., Modifier.semantics { contentDescription = "Submit button" }).

Theming Buttons

Customize button appearance by defining a Material 3 theme in res/values/themes.xml or using MaterialTheme in Compose.

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

@Composable
fun ThemedButtonExample() {
    MaterialTheme(
        colorScheme = MaterialTheme.colorScheme.copy(
            primary = Color(0xFF4CAF50)
        )
    ) {
        Button(onClick = { /* Handle click */ }) {
            Text("Custom Submit")
        }
    }
}
    

FAQ

What are Material 3 buttons?

Interactive UI components for triggering actions, available in five variants.

---

Which composable is used for a filled button?

Use Button for filled buttons.

---

How to make buttons accessible?

Use Modifier.semantics for content descriptions and ensure 48dp touch targets.

---

Can I customize button colors?

Yes, via ButtonDefaults.buttonColors or a custom MaterialTheme.colorScheme.

---

What is the minimum SDK required?

API level 21 (Android 5.0).