Button Composable in Jetpack Compose (with updated Material Design 3)

Source From Google

Hello guys,😀
If you have yet not setup Basic Compose project, please jump for 1st day of learning for Introduction to Compose & Setup 🏗️

Introduction to Button in Compose

Button is most common UI element used in Android. Almost 80 % of actions are initiated by Button. Button contains Text, Clickable property, Image to one of its side etc.

In Material Design 3 we can have 5 version of Button as Elevated, Filled, Filled Tonal, Outlined & Text.

Note : Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Material Design streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.

We already have a Material Design 2 buttons specification. But Recently, Material Design 3 was released. Have a Look on What’s New

Image from Google Source

Note : To start using Material Design 3 components add a dependency inside
implementation "androidx.compose.material3:material3:1.0.0-alpha12"

The general Information & syntax of all Button types looks like 👇

Elevated Button
Basic Outline Buttons with Shadow. Use only when required separation from Background.

Image from Google Source

Filled Button
Button with filled container. It’s contrasting surface with colour make it most prominent Button

Image from Google Source

Outlined Button
They are mostly used for non-primary actions. This is a kind of Button where we depict user to give some opportunity to perform action or escape from flow

Image from Google Source

Text Button
This are type of buttons used when we want to depict actions as less remarkable. When we are presenting multiple options to user we can give a thought to use this type of button.

Image from Google Source

FilledTonalButton
This are light Background & Dark label colors. They can be used to depict actions which are less remarkable to show than a Filled Button.

So this is basics 🙄, what else we can do with Button Parameters 🤔
In each Button Composable syntax, some common parameters are there, which you can use to satisfy your use cases like

1. Enable/Disable Button
   This can be controlled using enabled parameter
2. Set Elevation to differentiate Button from Background
   This can be controlled using elevation parameter
3. Set different Shape to Button
   This can be controlled using shape parameter
4. Set Border color to Button
   This can be controlled using border parameter
5. Set different Background/Content/Disable/Enable color
   This can be controlled using colors parameter
6. Pass Different Text & Image in Button (in Row fashion)
   This can be controlled using content parameter

You can view the usage inside code.
That’s all about the basics of Button. This article may not cover everything based on your complex Implementation & use cases but you are good to start with. All the best.😃
You can Clone this repository for basic setup. Further, all concepts source code can be updated from same. (Switch to branch ButtonCompose)
https://github.com/SatyamGondhale/LearnCompose

Subscribe & Stay Updated with latest content.

If you think this has helped you, feel free to 👏🏻 (claps) & share. Thanks.😄