All Button Types in Compose — Button, IconButton & Toggle Guide

Jetpack Compose provides a comprehensive hierarchy of button components to handle different use cases. This guide covers every button type with usage patterns and best practices.

Button Hierarchy

Component	Use Case	Style
Button	Primary actions	Solid background, white text
FilledTonalButton	Secondary actions	Tonal background
OutlinedButton	Tertiary actions	Border only
TextButton	Low-emphasis actions	Text only
ElevatedButton	Prominent actions with elevation	Elevated shadow

Basic Button Usage

\`kotlin
// Standard filled button
Button(
onClick = { /* action */ },
modifier = Modifier.padding(8.dp)
) {
Text("Click Me")
}

// Filled tonal button (secondary)
FilledTonalButton(onClick = { /* action */ }) {
Text("Secondary Action")
}

// Outlined button (tertiary)
OutlinedButton(onClick = { /* action */ }) {
Text("Tertiary Action")
}

// Text button (low emphasis)
TextButton(onClick = { /* action */ }) {
Text("Learn More")
}

// Elevated button (prominent with shadow)
ElevatedButton(onClick = { /* action */ }) {
Text("Important Action")
}
`\

Icon and Text Buttons

Combine icons with text for richer communication:

\`kotlin
// Button with leading icon
Button(onClick = { /* action */ }) {
Icon(
imageVector = Icons.Default.Send,
contentDescription = null,
modifier = Modifier.size(18.dp)
)
Spacer(modifier = Modifier.width(8.dp))
Text("Send")
}

// Button with trailing icon
Button(onClick = { /* action */ }) {
Text("Download")
Spacer(modifier = Modifier.width(8.dp))
Icon(
imageVector = Icons.Default.Download,
contentDescription = null,
modifier = Modifier.size(18.dp)
)
}
`\

Icon Buttons

For icon-only interactions:

\`kotlin
// Standard icon button
IconButton(onClick = { /* action */ }) {
Icon(Icons.Default.Favorite, contentDescription = "Like")
}

// Filled icon button
FilledIconButton(onClick = { /* action */ }) {
Icon(Icons.Default.Add, contentDescription = "Add")
}

// Outlined icon button
OutlinedIconButton(onClick = { /* action */ }) {
Icon(Icons.Default.Edit, contentDescription = "Edit")
}

// Filled tonal icon button
FilledTonalIconButton(onClick = { /* action */ }) {
Icon(Icons.Default.Share, contentDescription = "Share")
}
`\

Toggle Icon Buttons

For toggleable icon states:

\`kotlin
var isLiked by remember { mutableStateOf(false) }

FilledIconToggleButton(
checked = isLiked,
onCheckedChange = { isLiked = it }
) {
Icon(
imageVector = if (isLiked) Icons.Filled.Favorite else Icons.Outlined.Favorite,
contentDescription = "Toggle favorite"
)
}
`\

Loading Button Pattern

Display loading state with CircularProgressIndicator:

\`kotlin
var isLoading by remember { mutableStateOf(false) }

Button(
onClick = {
isLoading = true
// Perform async task
},
enabled = !isLoading,
modifier = Modifier.height(48.dp)
) {
if (isLoading) {
CircularProgressIndicator(
modifier = Modifier.size(20.dp),
color = MaterialTheme.colorScheme.onPrimary,
strokeWidth = 2.dp
)
Spacer(modifier = Modifier.width(8.dp))
}
Text(if (isLoading) "Loading..." else "Submit")
}
`\

Custom Styled Buttons

Customize colors, shapes, and effects:

\`kotlin
// Custom colors
Button(
onClick = { /* action */ },
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFF6200EE),
contentColor = Color.White,
disabledContainerColor = Color.Gray,
disabledContentColor = Color.DarkGray
)
) {
Text("Custom Colored")
}

// Custom shape and size
Button(
onClick = { /* action */ },
modifier = Modifier
.width(200.dp)
.height(56.dp),
shape = RoundedCornerShape(12.dp)
) {
Text("Custom Shape")
}

// Gradient button
Button(
onClick = { /* action */ },
modifier = Modifier
.background(
brush = Brush.linearGradient(
colors = listOf(Color(0xFF6200EE), Color(0xFF03DAC6))
)
)
.clip(RoundedCornerShape(8.dp))
) {
Text("Gradient Button")
}
`\

Button Groups

Organize related buttons horizontally or vertically:

\`kotlin
// Horizontal button group
Row(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Button(
onClick = { /* Cancel / },
modifier = Modifier.weight(1f),
colors = ButtonDefaults.outlinedButtonColors()
) {
Text("Cancel")
}
Button(
onClick = { / Confirm */ },
modifier = Modifier.weight(1f)
) {
Text("Confirm")
}
}

// Vertical button group
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Button(
onClick = { /* action 1 / },
modifier = Modifier.fillMaxWidth()
) {
Text("Option 1")
}
Button(
onClick = { / action 2 */ },
modifier = Modifier.fillMaxWidth()
) {
Text("Option 2")
}
}
`\

Key Takeaways

• Button for primary actions
• FilledTonalButton for secondary actions
• OutlinedButton for tertiary or important selections
• TextButton for low-emphasis options
• ElevatedButton for prominence with shadow
• IconButton variants for icon-only interactions
• FilledIconToggleButton for stateful icon interactions
• Always provide content descriptions for icons
• Combine icon + text for clarity and accessibility

This comprehensive button system ensures consistency and accessibility across your Compose UI.

8 Android app templates: Gumroad