#Button - Overview

Buttons are fundamental components that allow the user to trigger a defined action. There are five types of buttons. This 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 highlights the button's importance.
Filled tonal	Background color varies to match the surface.	Also for primary or significant actions. Filled tonal buttons provide more visual weight and suit functions such as "add to cart" and "Sign in."
Elevated	Stands out by having a shadow.	Serves a similar purpose to tonal buttons. Increase elevation to make the button 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."

Figure 1. The five button components.

#API Surface

onClick: The function that the system calls when the user presses the button.
enabled: When false, this parameter makes the button 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 snippet shows how to implement the component:

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

Note: If you want to build a custom button, use the Button composable.

Figure 2. A filled button (A purple background that reads, 'Filled').

#Filled Tonal Button

The filled tonal button component uses the FilledTonalButton composable. It is filled with a tonal color by default. The snippet shows how to implement the component:

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

Figure 3. A tonal button (A light purple background that reads, 'Tonal').

#Outlined Button

The outlined button component uses the OutlinedButton composable. It appears with an outline by default. The snippet shows how to implement the component:

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

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

#Elevated Button

The elevated button component uses the ElevatedButton composable. It has a shadow that represents the elevation effect by default. It is a filled button that includes a shadow. The snippet shows how to implement the component:

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

Figure 5. An elevated button (A gray background with shadow that reads, 'Elevated').

#Text Button

The text button component uses the TextButton composable. It appears as only text until pressed. It does not have a solid fill or outline by default. The snippet shows how to implement the component:

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

Figure 6. A text button (A button displaying only the text 'Text Button').