Button

Button is a basic interactive component in COUI, used to trigger actions or events. It provides multiple style options, including primary buttons, secondary buttons, and text buttons.

Import

import io.github.suqi8.coui.kmp.basic.Button

Basic Usage

The Button component can be used to trigger actions or events:

Button(
    onClick = { /* Handle click event */ }
) {
    Text("Button")
}

Button Types

COUI provides various types of buttons suitable for different scenarios and levels of importance:

Primary Button

Button(
    onClick = { /* Handle click event */ },
    colors = ButtonDefaults.buttonColorsPrimary()
) {
    Text("Primary Button")
}

Secondary Button

Button(
    onClick = { /* Handle click event */ },
    colors = ButtonDefaults.buttonColors()
) {
    Text("Secondary Button")
}

Text Button

TextButton(
    text = "Text Button",
    onClick = { /* Handle click event */ }
)

Borderless Text Button

Corresponds to COUI Widget.COUI.Button.Large.Borderless / Translate: no fill, primary-tinted label.

TextButton(
    text = "Borderless Button",
    onClick = { /* Handle click event */ },
    colors = ButtonDefaults.textButtonColorsBorderless()
)

Small Size Tier

Pass the Small metrics from ButtonDefaults together with a 14sp text style to get the COUI small size tier (Widget.COUI.Button.Small):

TextButton(
    text = "Small Button",
    onClick = { /* Handle click event */ },
    cornerRadius = ButtonDefaults.CornerRadiusSmall,
    minWidth = ButtonDefaults.MinWidthSmall,
    minHeight = ButtonDefaults.MinHeightSmall,
    insideMargin = ButtonDefaults.InsideMarginSmall,
    textStyle = COUITheme.textStyles.button.copy(fontSize = 14.sp)
)

Component States

Disabled State

Button(
    onClick = { /* Handle click event */ },
    enabled = false
) {
    Text("Disabled Button")
}

Properties

Button Properties

Property Name	Type	Description	Default Value	Required
onClick	() -> Unit	Callback triggered on click	-	Yes
modifier	Modifier	Modifier applied to the button	Modifier	No
enabled	Boolean	Whether the button is clickable	true	No
pressScaleEnabled	Boolean	Whether the button shrinks while pressed (COUIButton scaleEnable). Set to false for buttons that fill a container cell, such as a dialog button bar, so the only press feedback is the full-cell press tint	true	No
cornerRadius	Dp	Corner radius of the button	ButtonDefaults.CornerRadius	No
minWidth	Dp	Minimum width of the button	ButtonDefaults.MinWidth	No
minHeight	Dp	Minimum height of the button	ButtonDefaults.MinHeight	No
colors	ButtonColors	Button color configuration	ButtonDefaults.buttonColors()	No
insideMargin	PaddingValues	Internal padding of the button	ButtonDefaults.InsideMargin	No
interactionSource	MutableInteractionSource?	Interaction source for the button	null	No
indication	Indication?	Indication for click interactions; null because the COUI press feedback (scale + press tint) is built in	null	No
content	@Composable RowScope.() -> Unit	Composable function for button content	-	Yes

TextButton Properties

Property Name	Type	Description	Default Value	Required
text	String	Text displayed on the button	-	Yes
onClick	() -> Unit	Callback triggered on click	-	Yes
modifier	Modifier	Modifier applied to the button	Modifier	No
enabled	Boolean	Whether the button is clickable	true	No
pressScaleEnabled	Boolean	Whether the button shrinks while pressed (COUIButton scaleEnable). Set to false for buttons that fill a container cell, such as a dialog button bar	true	No
colors	TextButtonColors	Text button color configuration	ButtonDefaults.textButtonColors()	No
cornerRadius	Dp	Corner radius of the button	ButtonDefaults.CornerRadius	No
minWidth	Dp	Minimum width of the button	ButtonDefaults.MinWidth	No
minHeight	Dp	Minimum height of the button	ButtonDefaults.MinHeight	No
insideMargin	PaddingValues	Internal padding of the button	ButtonDefaults.InsideMargin	No
textStyle	TextStyle	Text style of the label (pass a 14sp style with the Small metrics for the COUI small size tier)	COUITheme.textStyles.button	No
interactionSource	MutableInteractionSource?	Interaction source for the button	null	No
indication	Indication?	Indication for click interactions; null because the COUI press feedback (scale + press tint) is built in	null	No

ButtonDefaults Object

The ButtonDefaults object provides default values and color configurations for button components.

Constants

Constant Name	Type	Description	Default Value
PressedScale	Float	Smallest scale a button shrinks to while pressed (surfaces up to 48 x 48dp)	0.92f
PressedBrightness	Float	Legacy COUIButton brightness value; retained for source compatibility only, no longer used	0.8f
MinWidth	Dp	Minimum width of the button	58.dp
MinHeight	Dp	Minimum height of the button	44.dp
CornerRadius	Dp	Corner radius of the button	22.dp
InsideMargin	PaddingValues	Internal padding of the button	PaddingValues(horizontal = 12.dp, vertical = 0.dp)
MinWidthSmall	Dp	Minimum width of the small size tier (COUI Widget.COUI.Button.Small)	52.dp
MinHeightSmall	Dp	Minimum height of the small size tier	28.dp
CornerRadiusSmall	Dp	Corner radius of the small size tier (height-derived capsule)	14.dp
InsideMarginSmall	PaddingValues	Internal padding of the small size tier	PaddingValues(horizontal = 12.dp, vertical = 4.dp)

Methods

Method Name	Type	Description
buttonColors()	ButtonColors	Creates color configuration for secondary buttons
buttonColorsPrimary()	ButtonColors	Creates color configuration for primary buttons
textButtonColors()	TextButtonColors	Creates color configuration for secondary text buttons
textButtonColorsPrimary()	TextButtonColors	Creates color configuration for primary text buttons
textButtonColorsBorderless()	TextButtonColors	Creates color configuration for borderless / text buttons (transparent fill, themed label)

Advanced Usage

Button with Icon

Button(
    onClick = { /* Handle click event */ }
) {
    Icon(
        imageVector = COUIIcons.Favorites,
        contentDescription = "Favorites"
    )
    Spacer(modifier = Modifier.width(8.dp))
    Text("Button with Icon")
}

Custom Style Button

Button(
    onClick = { /* Handle click event */ },
    colors = ButtonDefaults.buttonColors(
        color = Color.Red.copy(alpha = 0.7f)
    ),
    cornerRadius = 8.dp
) {
    Text("Custom Button")
}

Loading State Button

var isLoading by remember { mutableStateOf(false) }
val scope = rememberCoroutineScope()

Button(
    onClick = {
        isLoading = true
        // Simulate operation
        scope.launch {
            delay(2000)
            isLoading = false
        }
    },
    enabled = !isLoading
) {
     AnimatedVisibility(
        visible = isLoading
    ) {
        CircularProgressIndicator(
            modifier = Modifier.padding(end = 8.dp),
            size = 20.dp,
            strokeWidth = 4.dp
        )
    }
    Text("Submit")
}

Changelog

Last edited 1 day ago

View full history

b31da82-library: match the dialog button bar to its real COUI metrics

429b622-docs: rebrand site to COUI and audit all component pages

9aba0de-chore: rename package from com.suqi8 to io.github.suqi8

7acb5ab-library: retheme to COUI 16 and rename Miuix to COUI

75a735f-library: add textStyle parameter to TextButton

cc7bb51-build: bump version to 0.9.2

00db464-library: add COUI borderless text button variant

48ec3b0-library: correct components to match real COUI control source

6e555d6-library: adopt COUI button and card metrics

a6234e9-library: refactor: unify dropdown and spinner components (#315)

ed477a4-library: implement baseline and startup profile conversion for Android

f3c22c4-library: add interactionSource and indication to some components (#257)

cb66096-refactor: Move extended icon to a separate library

25d20ba-docs: Preview for components in documentation website (#80)

cc1634b-docs: Add English version through AI translation

7bd2bac-chore: Add documents (#63)