OutlinedButton

Material	Material 3

Los OutlinedButton son botones con un diseño menos llamativo ya que están diseñados para acciones importantes pero que no son TAN importantes como la acción primaria.

Implementación

Definición del componente

Material

@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = null,
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = ButtonDefaults.outlinedBorder,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

Atributo	Descripción
onClick	Función lambda que se ejecutará cuando el usuario pulse el botón.
modifier	Modificador que implementará el composable.
enabled	Habilita o deshabilita el botón.
interactionSource	Representa un stream de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
elevation	Permite modificar la elevación del componente en sus distintos estados con el objeto ButtonElevation.
shape	Define la forma del Button y su sombra.
border	Borde para el Button.
colors	Nos permite modificar el color del fondo del Button y el del contenido.
contentPadding	The spacing values to apply internally between the container and the content
content	Contenido a mostrar dentro del Button.

Material 3

@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.outlinedShape,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    elevation: ButtonElevation? = null,
    border: BorderStroke? = ButtonDefaults.outlinedButtonBorder,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
)

Atributo	Descripción
onClick	Función lambda que se ejecutará cuando el usuario pulse el botón.
modifier	Modificador que implementará el composable.
enabled	Habilita o deshabilita el botón.
shape	Define la forma del Button y su sombra.
colors	Nos permite modificar el color del fondo del Button y el del contenido.
elevation	Permite modificar la elevación del componente en sus distintos estados con el objeto ButtonElevation.
border	Borde para el Button.
contentPadding	The spacing values to apply internally between the container and the content
interactionSource	Representa un stream de interacciones del botón lo que nos permite modificar su diseño o comportamiento. Por ejemplo que mientras el botón esté pulsado, este encoja.
content	Contenido a mostrar dentro del Button.

Fuente

Puedes acceder a la documentación oficial de Google desde aquí.

Ejemplos

Material

@Composable
fun OutlinedButtonExample() {
    OutlinedButton(onClick = { print("Hello") }) {
        Text(text = "Click me")
    }
}

Material 3

@Composable
fun OutlinedButtonExample() {
    OutlinedButton(onClick = { print("Hello") }) {
        Text(text = "Click me")
    }
}