Button - Compose Unstyled

A button component for custom button styles.

import androidx.compose.foundation.LocalIndication
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
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
import com.composeunstyled.UnstyledButton

@Composable
fun ButtonDemo() {
  UnstyledButton(
    onClick = { },
    modifier = Modifier
      .clip(RoundedCornerShape(10.dp))
      .heightIn(32.dp)
      .background(Color(0xFFF8FAFC))
      .border(1.dp, Color(0xFFCACACA), RoundedCornerShape(10.dp)),
    contentPadding = PaddingValues(horizontal = 10.dp),
    indication = LocalIndication.current,
  ) {
    BasicText("Button")
  }
}

Show codeHide Code

Installation

implementation("com.composables:composeunstyled-button")

Anatomy

UnstyledButton(onClick = onClick) {
}

Concepts

UnstyledButton represents the clickable button surface.

Accessibility

UnstyledButton uses Role.Button by default. Enter and Space activate it.

Code Examples

Disabling a button

Use the enabled parameter to prevent button activation:

UnstyledButton(
  enabled = false,
  onClick = { submit() },
) {
  BasicText("Submit")
}

API Reference

UnstyledButton

Parameter	Type	Description
`onClick`	`() -> Unit`	The callback to be invoked when the button is clicked.
`enabled`	`Boolean`	Whether the button is enabled.
`contentPadding`	`PaddingValues`	Padding values for the content.
`modifier`	`Modifier`	Modifier to be applied to the button.
`role`	`Role`	The role of the button for accessibility purposes.
`indication`	`Indication?`	The indication to be shown when the button is interacted with.
`interactionSource`	`MutableInteractionSource?`	The interaction source for the button.
`contentAlignment`	`Alignment`
`content`	`() -> Unit`	A composable function that defines the content of the button.