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