Material 3 Components

Material 3 out of the box

Compose ships with Material 3 — Google’s design system — so you get polished, accessible components that automatically follow your theme’s colors and fonts.

Buttons

Button(onClick = { }) { Text("Primary") }
OutlinedButton(onClick = { }) { Text("Outlined") }
TextButton(onClick = { }) { Text("Text") }
IconButton(onClick = { }) { Icon(Icons.Default.Favorite, null) }

Text fields

var email by remember { mutableStateOf("") }

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    singleLine = true,
    leadingIcon = { Icon(Icons.Default.Email, null) }
)

Cards and surfaces

Card(modifier = Modifier.fillMaxWidth().padding(8.dp)) {
    Column(Modifier.padding(16.dp)) {
        Text("Title", style = MaterialTheme.typography.titleMedium)
        Text("Some supporting text")
    }
}

Scaffold: the screen skeleton

Scaffold provides standard slots for a top bar, bottom bar, floating action button and the main content — and handles their insets/padding for you.

Scaffold(
    topBar = {
        TopAppBar(title = { Text("Home") })
    },
    floatingActionButton = {
        FloatingActionButton(onClick = { }) {
            Icon(Icons.Default.Add, contentDescription = "Add")
        }
    }
) { innerPadding ->
    Column(Modifier.padding(innerPadding)) {
        // your screen content
    }
}

Always apply the innerPadding Scaffold gives you, or content will hide behind the bars.

Snackbars and dialogs

AlertDialog(
    onDismissRequest = { open = false },
    title = { Text("Delete?") },
    confirmButton = { TextButton(onClick = { /* delete */ }) { Text("Yes") } },
    dismissButton = { TextButton(onClick = { open = false }) { Text("Cancel") } }
)

Common mistakes

• Ignoring Scaffold’s innerPadding (content overlaps the app bar).
• Hard-coding colors instead of using MaterialTheme.colorScheme.
• Rebuilding components that Material 3 already provides.

Summary: Material 3 gives you themed buttons, text fields, cards, dialogs and a Scaffold skeleton. Use them, respect innerPadding, and pull colors from the theme.