How to Add Elevation to Button? What to Import in Jetpack Compose?

Quick Fix: To add elevation to your Button composable, pass values to the elevation parameter. Import ButtonDefaults object from androidx.compose.material3.ButtonDefaults and modify your code accordingly:

@Composable
fun MyUi() {
    Column() {
        Button(
            onClick = {  },
            elevation = ButtonDefaults.buttonElevation(
                defaultElevation = 10.dp
            )
        ) {
            Text(text = &quot;Lorem&quot;)
        }
    }
}

The Problem:

In Jetpack Compose, how do I add elevation to a Button, and which import is required to achieve this?

The Solutions:

Solution 1: Using Material 3 ButtonDefaults

In Jetpack Compose, you can easily add elevation to a Button by passing a value to the `elevation` parameter. The elevation represents the distance between the button and its resting surface, creating a shadow effect. Here’s an example:
“`
@Composable
fun MyUi() {
Column() {
Button(
onClick = { /* your click handler */ },
elevation = ButtonDefaults.buttonElevation(
defaultElevation = 10.dp
)
) {
Text(text = “Lorem”)
}
}
}
“`
To use `elevation` parameter, you need to import `ButtonDefaults` from `androidx.compose.material3.ButtonDefaults`. This object provides default elevation values for the button. In this example, we set a default elevation of `10.dp`, which will add a 10-dp shadow around the button.

Solution 2: Using `ButtonDefaults.elevation()`

To add elevation to a button in Jetpack Compose, you can use the elevation() parameter provided by ButtonDefaults. This parameter allows you to customize the elevation of the button in various states, such as default, pressed, disabled, hovered, and focused.

Here’s how you can implement this solution:

@Composable
fun MyUi() {
    Column() {
        Button(
            onClick = { /*TODO*/ },
            elevation = ButtonDefaults.elevation(
                defaultElevation = 2.dp,
                pressedElevation = 8.dp,
                disabledElevation = 0.dp,
                hoveredElevation = 4.dp,
                focusedElevation = 4.dp
            )
        ) {
            Text(text = "Lorem")
        }
    }
}

In this code:

defaultElevation sets the elevation of the button when it’s in its default state.
pressedElevation sets the elevation when the button is pressed.
disabledElevation sets the elevation when the button is disabled.
hoveredElevation sets the elevation when the mouse pointer hovers over the button.
focusedElevation sets the elevation when the button has input focus.

Q&A