Material3 ‐ Buttons - devrath/Material-3-Design-Kit GitHub Wiki

Contents
Demo representation
Normal Button
Elevated Button
FilledTonal Button
Outlined Button
Text Button

Demo representation

Light Theme Dark Theme

Normal Button

Code

Button( onClick = { /** Your action **/ }) {
   Text(text = "Action")
}

When it can be used

  • It can be used in a prominent action for a screen.
  • Usually it is just one button indicating a major action.
  • Example can be confirm action.

Elevated Button

Code

ElevatedButton(onClick = { /** Your action **/ }) {
   Text(text = "Action")
}

When it can be used

  • It is used in scenarios where a button is placed on top of the image or other widget.
  • It comes with a light background along with a shadow.

FilledTonal Button

Code

FilledTonalButton(onClick = { /** Your action **/ }) {
    Text(text = "Action")
}

When it can be used

  • It is used in scenarios where a lot of buttons are needed on the screen.
  • One example can be a button on a row in a list.
  • It is less prominent but still clickable and does not indicate major action.

Outlined Button

Code

OutlinedButton(onClick = { /** Your action **/ }) {
    Text(text = "Action")
}

When it can be used

  • It is also used to indicate an action but with less prominence to the Button type which is a major action.

Text Button

Code

TextButton(onClick = { /** Your action **/ }) {
   Text(text = "Action")
}

When it can be used

  • It is usually the least place to expect an action.
  • Usually a read-more text but acts as a button to perform an action.
⚠️ **GitHub.com Fallback** ⚠️