Button

Buttons are fundamental components that allow the user to trigger a defined action. There are five types of buttons. The following table describes the appearance of each of the five button types, as well as where you should use them.

Type

Appearance

Purpose

Filled

Solid background with contrasting text.

High-emphasis buttons. These are for primary actions in an application, such as "submit" and "save." The shadow effect emphasizes the button's importance.

Filled tonal

Background color varies to match the surface.

Also for primary or significant actions. Filled buttons provide more visual weight and suit functions such as "add to cart" and "Sign in."

Elevated

Stands out by having a shadow.

Fits a similar role to tonal buttons. Increase elevation to cause the button to appear even more prominently.

Outlined

Features a border with no fill.

Medium-emphasis buttons, containing actions that are important but not primary. They pair well with other buttons to indicate alternative, secondary actions like "Cancel" or "Back."

Text

Displays text with no background or border.

Low-emphasis buttons, ideal for less critical actions such as navigational links, or secondary functions like "Learn More" or "View details."

The following image demonstrates the five types of buttons in Material Design.

An example of each of the five button components, with their unique characteristics highlighted.
Figure 1. The five button components.

API surface

  • onClick: The function called when the user presses the button.
  • enabled: When false, this parameter causes the button to appear unavailable and inactive.
  • colors: An instance of ButtonColors that determines the colors used in the button.
  • contentPadding: The padding within the button.

Filled button

The filled button component uses the basic Button composable. It is filled with a solid color by default. The following snippet demonstrates how to implement the component:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

This implementation appears as follows:

A filled button with a purple background that reads, 'filled'.
Figure 2. A filled button.

Filled tonal button

The filled tonal button component uses the FilledTonalButton composable. It is filled with a tonal color by default.

The following snippet demonstrates how to implement the component:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

This implementation appears as follows:

A tonal button with a light purple background that reads, 'filled'.
Figure 3. A tonal button.

Outlined button

The outlined button component uses the OutlinedButton composable. It appears with an outline by default.

The following snippet demonstrates how to implement the component:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

This implementation appears as follows:

A transparent outlined button with a dark border that reads, 'Outlined'.
Figure 4. An outlined button.

Elevated button

The elevated button component uses the ElevatedButton composable. It has a shadow that represents the elevation effect by default. Note that it is essentially an outlined button with a shadow.

The following snippet demonstrates how to implement the component:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

This implementation appears as follows:

An elevated button with a gray background that reads, 'Elevated'.
Figure 5. An elevated button.

Text button

The text button component uses the TextButton composable. Until pressed, it appears as only text. It does not have a solid fill or outline by default.

The following snippet demonstrates how to implement the component:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

This implementation appears as follows:

A text button that reads 'Text Button'
Figure 6. A text button.

Additional resources