A Comprehensive Guide to Buttons and Actions in Jetpack Compose

Jetpack Compose is a modern toolkit for building native Android UIs, designed to simplify and accelerate UI development with a declarative approach. Among the core components of any user interface are buttons, which are essential for enabling user interactions. This guide explores various button types available in Jetpack Compose, along with practical examples and detailed explanations of their use cases.

Understanding Buttons in Jetpack Compose

Buttons are interactive UI components that allow users to perform actions, such as submitting forms, toggling settings, or navigating between screens. Jetpack Compose offers a wide range of button types to meet different design and functional needs, from basic action buttons to specialized forms like image buttons, switches, radio buttons, and checkboxes.

Here, we’ll dive into each button type, providing explanations and detailed use cases to illustrate how and when to use them effectively.

Button Types and Their Use Cases

1. Basic Button

• Description: A standard button that performs an action when clicked. It usually consists of a text label inside a rectangular container with optional customization for color, shape, and padding.
• Use Case: Ideal for primary actions on a screen, such as submitting a form, logging in, or confirming a dialog. Basic buttons are typically used where a straightforward, simple interaction is needed, and they are often the most frequently used button type in applications.

@Composable
fun BasicButtonExample() {
    Button(
        onClick = { /* Handle button click */ },
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(),
        shape = RoundedCornerShape(8.dp),
        enabled = true,
        contentPadding = PaddingValues(12.dp)
    ) {
        Text(text = "Click Me")
    }
}

2. Circle Button

• Description: A button with a perfectly circular shape, typically smaller in size and often used for quick actions represented by icons.
• Use Case: Best suited for floating action buttons (FABs) or quick action buttons like “Add” or “Favorite.” They are great for visually distinguishing key actions that require immediate attention or interaction without occupying much space. Circle buttons are often placed in prominent locations like the bottom right corner to catch the user’s eye.

@Composable
fun CircleButtonExample() {
    Button(
        onClick = { /* Handle click */ },
        shape = CircleShape,
        modifier = Modifier
            .size(70.dp)
            .padding(8.dp)
    ) {
        Text("C".uppercase(), fontWeight = FontWeight.Bold, color = Color.White)
    }
}

3. Rectangle Button

• Description: A button with sharp, 90-degree edges in a rectangular shape, providing a formal and defined appearance.
• Use Case: Suitable for toolbar actions, navigation buttons, or scenarios where a clear and structured look is preferred. Rectangle buttons convey a sense of seriousness and formality, making them ideal for professional or business-oriented apps.

@Composable
fun RectangleButtonExample() {
    Button(
        onClick = { /* Handle click */ },
        shape = RectangleShape,
        modifier = Modifier
            .width(120.dp)
            .height(50.dp)
            .padding(8.dp)
    ) {
        Text("Rectangle", color = Color.White)
    }
}

4. Capsule Button

• Description: A button with rounded ends, resembling a capsule shape, which gives it a soft, approachable look.
• Use Case: Great for actions that need to stand out, like “Sign Up,” “Learn More,” or “Get Started.” Capsule buttons are eye-catching and often used to highlight important calls to action in landing pages, marketing screens, or onboarding flows.

@Composable
fun CapsuleButtonExample() {
    Button(
        onClick = { /* Handle click */ },
        shape = RoundedCornerShape(50),
        modifier = Modifier
            .wrapContentWidth()
            .wrapContentHeight()
            .padding(8.dp)
    ) {
        Text("Capsule", color = Color.White)
    }
}

5. Oval Button

• Description: An elongated button with rounded sides, providing a unique and stylish appearance.
• Use Case: Ideal for actions that benefit from a more artistic or distinct look, such as “Start,” “Join,” or “Discover.” Oval buttons can add a sophisticated touch to your UI, especially when used for standout actions that you want users to notice immediately.

@Composable
fun OvalButtonExample() {
    Button(
        onClick = { /* Handle click */ },
        shape = RoundedCornerShape(50.dp, 20.dp, 50.dp, 20.dp),
        modifier = Modifier
            .width(120.dp)
            .height(60.dp)
            .padding(8.dp)
    ) {
        Text("Oval", color = Color.White)
    }
}

6. Icon Button with Text

• Description: Combines an icon with a text label, providing both visual and contextual information about the action.
• Use Case: Useful when you want to reinforce the meaning of an action with both text and a graphic, such as “Share,” “Like,” or “Download.” Icon buttons with text help guide users by offering more context than an icon or text alone, improving overall usability.

@Composable
fun IconButtonWithTextExample() {
    Button(
        onClick = { /* Handle click */ },
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        colors = ButtonDefaults.buttonColors(containerColor = Color.Blue)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Icon",
            tint = Color.White,
            modifier = Modifier.padding(end = 8.dp)
        )
        Text(text = "Like", color = Color.White)
    }
}

7. Floating Action Button (FAB)

• Description: A prominent, circular button that floats above the UI, typically used for the primary action on a screen.
• Use Case: Best for emphasizing the most important action on a screen, such as adding an item, creating a new document, or sending a message. FABs are usually placed in the bottom corner of the screen, making them easy to access without interrupting the main content flow.

@Composable
fun FloatingActionButtonExample() {
    FloatingActionButton(
        onClick = { /* Handle click */ },
        modifier = Modifier.padding(16.dp),
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = Color.White
    ) {
        Icon(imageVector = Icons.Default.Favorite, contentDescription = "FAB Icon")
    }
}

8. Toggle Button with Icon

• Description: A button that toggles between two states, often using an icon to visually indicate the state change.
• Use Case: Ideal for toggling settings like play/pause, mute/unmute, or dark/light mode. Toggle buttons with icons provide immediate visual feedback, making it clear what the current state of the action is.

@Composable
fun ToggleButtonWithIconExample(isPlaying: Boolean, onTogglePlay: () -> Unit) {
    Button(
        onClick = { onTogglePlay() },
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = if (isPlaying) Icons.Default.Favorite else Icons.Default.Favorite,
            contentDescription = if (isPlaying) "Playing" else "Paused"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(if (isPlaying) "Playing" else "Paused")
    }
}

9. Gradient Background Button

• Description: A button with a visually striking gradient background, adding a modern and dynamic touch to the UI.
• Use Case: Perfect for actions that need to grab the user’s attention, like “Buy Now,” “Subscribe,” or other high-priority actions. Gradient buttons are particularly effective in e-commerce, marketing, and promotional interfaces where visual appeal is critical.

@Composable
fun GradientButtonExample() {
    Button(
        onClick = { /* Handle click */ },
        modifier = Modifier.padding(8.dp),
        colors = ButtonDefaults.buttonColors(containerColor = Color.LightGray)
    ) {
        Text(text = "Gradient Button", color = Color.White)
    }
}

10. Button with Badge

• Description: A button that includes a badge element to display notifications, updates, or counts, enhancing its functionality.
• Use Case: Useful when you need to show alerts or status indicators, such as unread messages, notifications, or pending updates. The badge provides additional context about the button’s action, making it especially valuable in messaging apps, dashboards, and task management interfaces.

@Composable
fun ButtonWithBadgeExample() {
    Box(modifier = Modifier.padding(8.dp)) {
        Button(onClick = { /* Handle click */ }) {
            Text("Messages")
        }
        Badge(
            modifier = Modifier
                .align(Alignment.TopEnd)
                .offset(x = (-4).dp, y = 4.dp)
        ) {
            Text("3")
        }
    }
}

11. Image Button

• Description: A button that uses an image instead of text, often providing a purely visual representation of the action.
• Use Case: Ideal for actions that are best represented with icons, such as “Favorite,” “Delete,” or “Settings.” Image buttons are compact and can add a visually appealing touch to your UI, enhancing both design and functionality.

@Composable
fun ImageButtonExample(onClick: () -> Unit) {
    val image: Painter = painterResource(id = R.drawable.ic_launcher_background)
    Image(
        painter = image,
        contentDescription = "Image Button",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(50.dp)
            .clickable(onClick = onClick)
    )
}

12. Switch Button

• Description: A toggle button that switches between on and off states, providing clear feedback on the current setting.
• Use Case: Commonly used for settings and preferences, such as enabling notifications, toggling dark mode, or controlling devices in smart home apps. Switch buttons are intuitive, with a sliding action that makes state changes clear and immediate.

@Composable
fun SwitchButtonExample() {
    var isChecked by remember { mutableStateOf(false) }

    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text(text = "Switch is ${if (isChecked) "On" else "Off"}")
        Switch(
            checked = isChecked,
            onCheckedChange = { isChecked = it },
            colors = SwitchDefaults.colors(
                checkedThumbColor = Color.Green,
                uncheckedThumbColor = Color.Red
            )
        )
    }
}

13. Radio Button

• Description: A circular button used to select one option from a set of choices.
• Use Case: Frequently used in forms, surveys, and settings where users need to choose a single option among many. Radio buttons are easy to understand and provide clear visual feedback about the selected state, making them ideal for exclusive choices.

@Composable
fun RadioButtonExample() {
    var selectedOption by remember { mutableStateOf("Option 1") }

    Column {
        Text(text = "Choose an option:", fontSize = 16.sp)
        listOf("Option 1", "Option 2", "Option 3").forEach { option ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.clickable { selectedOption = option }
            ) {
                RadioButton(
                    selected = (selectedOption == option),
                    onClick = { selectedOption = option }
                )
                Text(text = option)
            }
        }
    }
}

14. Checkbox Button

• Description: A box that can be checked or unchecked, allowing multiple selections from a group.
• Use Case: Commonly used in forms, settings, and lists where users need to select multiple options. Checkbox buttons are perfect for creating checklists, toggling features, and managing selections in task-oriented interfaces.

@Composable
fun CheckboxButtonExample() {
    var checkedState by remember { mutableStateOf(false) }

    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Checkbox(
            checked = checkedState,
            onCheckedChange = { checkedState = it }
        )
        Text(text = if (checkedState) "Checked" else "Unchecked")
    }
}

Conclusion

Buttons are crucial components in any Android application, serving as gateways for user actions. Jetpack Compose offers a wide variety of button types, each with unique characteristics tailored for specific use cases. From basic buttons for everyday actions to more specialized buttons like switches, radio buttons, and badges, Jetpack Compose enables developers to create engaging, responsive, and visually appealing UIs with ease.

Connect with Me on LinkedIn

If you found this article helpful and want to stay updated with more insights and tips on Android development, Jetpack Compose, and other tech topics, feel free to connect with me on LinkedIn. I regularly publish articles, share my experiences, and engage with the developer community. Your feedback and interaction are always welcome!

Follow me on LinkedIn