Button

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.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.heightIn
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.composeunstyled.Text
import com.composeunstyled.UnstyledButton
import com.composeunstyled.demo.borderToken
import com.composeunstyled.demo.colors
import com.composeunstyled.demo.surfaceToken
import com.composeunstyled.theme.Theme

@Preview
@Composable
fun ButtonDemo() {
  Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center,
  ) {
    UnstyledButton(
      onClick = { },
      modifier = Modifier
        .clip(RectangleShape)
        .heightIn(32.dp)
        .background(Theme[colors][surfaceToken])
        .border(1.dp, Theme[colors][borderToken], RectangleShape),
      contentPadding = PaddingValues(horizontal = 10.dp),
      indication = LocalIndication.current,
    ) {
      Text("Button")
    }
  }
}

Installation

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

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.