Rounded Button

Preview

Description

The rounded button component is a user interface element designed for interactive actions in an Android application using Jetpack Compose. It features a visually appealing rounded shape with a white background and black text, providing a clear and intuitive way for users to engage with the app.

The rounded edges add a touch of modernity and elegance to the button, while the contrasting colors of the background and text ensure good visibility and readability. This component is suitable for various use cases, such as form submissions, navigation triggers, or any other call-to-action functionalities within the app's UI.

Sample Code

import com.becompose.sample.ui.components.button.RoundedButton

RoundedButton(
       text = "Choose your location",
       onClick = {}
)

Component Code

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun RoundedButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Box(
        modifier = modifier
            .clip(RoundedCornerShape(48.dp))
            .background(Color.White)
            .clickable(onClick = onClick)
            .padding(horizontal = 36.dp, vertical = 16.dp)
    ) {
        BasicText(
            text = text,
            style = MaterialTheme.typography.labelSmall.copy(color = Color.Black)
        )
    }
}

Parameters