Jetpack Compose - Buttons

All buttons: When choosing the right button for action, consider the level of emphasis each button type provides.

This Button Jetpack Compose component has two compulsory attributes. OnClick and text.

Jetpack compose Button Demo

A Button has a onClick-Function. You can add a Text-Composable or any other Composables as child elements of the Button.

* Button

* Elevated Button

* Filled Tonal Button

* Outlined Button

* Text Button

* Button With Icon Sample

* Icon Button Sample

* Icon Toggle Button Sample

* Button cut corner shape

* Rounded corners button

..

package com.compose.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.compose.example.ui.theme.ComposeExampleTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeExampleTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainContent()
                }
            }
        }
    }
}



@Composable
fun MainContent() {
    Column(
        modifier = Modifier
            .padding(20.dp)
            .verticalScroll(rememberScrollState())
    ) {

        // * Button
        Button(onClick = { /* Do something! */ }) { Text("Button") }

        // * Elevated Button
        ElevatedButton(onClick = { /* Do something! */ }) { Text("Elevated Button") }

        // * Filled Tonal Button
        FilledTonalButton(onClick = { /* Do something! */ }) { Text("Filled Tonal Button") }

        // * Outlined Button
        OutlinedButton(onClick = { /* Do something! */ }) { Text("Outlined Button") }

        // * Text Button
        TextButton(onClick = { /* Do something! */ }) { Text("Text Button") }

        // * Button With Icon Sample
        Button(onClick = { /* Do something! */ }) {
            Icon(Icons.Filled.Favorite, contentDescription = "Localized description",
                modifier = Modifier.size(ButtonDefaults.IconSize))
            Spacer(Modifier.size(ButtonDefaults.IconSpacing))
            Text("Like")
        }

        // * Icon Button Sample
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
        }

        //  * Icon Toggle Button Sample
        var checked by remember { mutableStateOf(false) }
        IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
            val tint by animateColorAsState(if (checked) Color(0xFFEC407A) else Color(0xFFB0BEC5))
            Icon(Icons.Filled.Favorite, contentDescription = "Localized description", tint = tint)
        }

        // * Button cut corner shape
        Button(
            onClick = { /*TODO*/ }
            , shape = CutCornerShape(topStart = 12.dp, bottomEnd = 12.dp)
        ) {
            Text(
                text = "Button cut corner shape",
                Modifier.padding(12.dp))
        }

        // * Rounded corners button
        Button(
            onClick = { /*TODO*/ }
            , shape = RoundedCornerShape(20.dp)
        ) {
            Text(
                text = "Rounded corners button",
                Modifier.padding(12.dp))
        }

    }
}

..

GET source code on Github: