The Button component provides a customizable, interactive button with support for multiple variants, loading states, and custom content.
Import
import com.nomanr.lumo.ui.components.Button
import com.nomanr.lumo.ui.components.ButtonVariant
Button.kt:35-57
Basic Usage
Button(
text = "Click Me",
onClick = { /* handle click */ }
)
Component Signature
@Composable
fun Button(
modifier: Modifier = Modifier,
text: String? = null,
enabled: Boolean = true,
loading: Boolean = false,
variant: ButtonVariant = ButtonVariant.Primary,
onClick: () -> Unit = {},
contentPadding: PaddingValues = ButtonDefaults.contentPadding,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
content: (@Composable () -> Unit)? = null,
)
Parameters
modifier
Modifier
default:"Modifier"
Modifier to be applied to the button
Text to display in the button. If null, content lambda is used instead
Whether the button is enabled and can be clicked
Whether to show a loading indicator (currently not implemented in source)
variant
ButtonVariant
default:"ButtonVariant.Primary"
Callback invoked when the button is clicked
contentPadding
PaddingValues
default:"ButtonDefaults.contentPadding"
Padding around the button content (default: 16.dp horizontal, 8.dp vertical)
Source of interactions for the button (hover, press, focus)
content
@Composable (() -> Unit)?
default:"null"
Custom composable content. If provided, text parameter is ignored
ButtonVariant enum (Button.kt:153-167):
Primary Variants
// Solid primary color background
Button(text = "Primary", variant = ButtonVariant.Primary, onClick = {})
// Outlined with primary color border
Button(text = "Primary Outlined", variant = ButtonVariant.PrimaryOutlined, onClick = {})
// Primary with elevation/shadow
Button(text = "Primary Elevated", variant = ButtonVariant.PrimaryElevated, onClick = {})
// Borderless primary color text
Button(text = "Primary Ghost", variant = ButtonVariant.PrimaryGhost, onClick = {})
Secondary Variants
Button(text = "Secondary", variant = ButtonVariant.Secondary, onClick = {})
Button(text = "Secondary Outlined", variant = ButtonVariant.SecondaryOutlined, onClick = {})
Button(text = "Secondary Elevated", variant = ButtonVariant.SecondaryElevated, onClick = {})
Button(text = "Secondary Ghost", variant = ButtonVariant.SecondaryGhost, onClick = {})
Destructive Variants
Button(text = "Delete", variant = ButtonVariant.Destructive, onClick = {})
Button(text = "Delete", variant = ButtonVariant.DestructiveOutlined, onClick = {})
Button(text = "Delete", variant = ButtonVariant.DestructiveElevated, onClick = {})
Button(text = "Delete", variant = ButtonVariant.DestructiveGhost, onClick = {})
Ghost Variant
// Transparent background, uses current content color
Button(text = "Ghost", variant = ButtonVariant.Ghost, onClick = {})
Examples
Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
Button(
text = "Enabled Button",
variant = ButtonVariant.Primary,
onClick = { println("Clicked!") }
)
Button(
text = "Disabled Button",
variant = ButtonVariant.Primary,
enabled = false
)
}
Custom Content
Button(
onClick = { /* handle click */ },
content = {
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically
) {
Icon(imageVector = Icons.Default.Add, contentDescription = null)
Text("Add Item")
}
}
)
Different Variants
// From preview functions (Button.kt:468-632)
Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
Button(text = "Primary", variant = ButtonVariant.Primary, onClick = {})
Button(text = "Secondary", variant = ButtonVariant.Secondary, onClick = {})
Button(text = "Destructive", variant = ButtonVariant.Destructive, onClick = {})
}
Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
Button(text = "Outlined", variant = ButtonVariant.PrimaryOutlined, onClick = {})
Button(text = "Elevated", variant = ButtonVariant.PrimaryElevated, onClick = {})
Button(text = "Ghost", variant = ButtonVariant.PrimaryGhost, onClick = {})
}
Styling
Default Styling
From ButtonDefaults (Button.kt:188-202):
- Min Height: 44.dp
- Shape: RoundedCornerShape(12.dp)
- Horizontal Padding: 16.dp
- Vertical Padding: 8.dp
- Outline Width: 1.dp (for outlined variants)
- Elevation: 2.dp (for elevated variants)
Typography
Buttons use AppTheme.typography.button style for text (Button.kt:138).
Accessibility
- Buttons automatically have
Role.Button semantic property (Button.kt:94)
- Minimum interactive size of 44.dp height for touch targets
- Support for interaction states (hover, press, focus) via InteractionSource
- Disabled state clearly indicated with reduced opacity colors
Source Reference
Full implementation: com.nomanr.lumo.ui.components.Button.kt