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.
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 ofButtonColors
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") } }
This implementation appears as follows:
![A filled button with a purple background that reads, 'filled'.](/https/developer.android.com/static/develop/ui/compose/images/components/button-filled.png)
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") } }
This implementation appears as follows:
![A tonal button with a light purple background that reads, 'filled'.](/https/developer.android.com/static/develop/ui/compose/images/components/button-tonal.png)
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") } }
This implementation appears as follows:
![A transparent outlined button with a dark border that reads, 'Outlined'.](/https/developer.android.com/static/develop/ui/compose/images/components/button-outlined.png)
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") } }
This implementation appears as follows:
![An elevated button with a gray background that reads, 'Elevated'.](/https/developer.android.com/static/develop/ui/compose/images/components/button-elevated.png)
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") } }
This implementation appears as follows:
![A text button that reads 'Text Button'](/https/developer.android.com/static/develop/ui/compose/images/components/button-text.png)