KIconButton - farimarwat/KrossUi GitHub Wiki
KIconButton
Component Documentation
🎯 A platform-aware icon button for Kotlin Multiplatform apps. Provides a customizable button with optional icon and text, supporting both Android and iOS.
🔹 Overview
Element | Type | Description |
---|---|---|
KIconButton |
Composable | Clickable button with icon and optional label. |
🧩 KIconButton
Definition:
A cross-platform button component that supports displaying an icon and an optional label. Automatically adapts to Android (DrawableResource
) and iOS (SF Symbol
) icons.
Parameters
Parameter | Type | Default | Description |
---|---|---|---|
modifier |
Modifier |
Modifier |
Modifier to style or position the button. |
title |
String? |
null |
Optional label to show beside the icon. |
onClick |
() -> Unit |
– | Lambda invoked when the button is clicked. |
colors |
KIconButtonColors |
KIconButtonDefaults.colors() |
Button and content colors in various states. |
fontSize |
TextUnit |
KIconButtonDefaults.FontSize |
Font size for the label text. |
cornerRadius |
Double |
KIconButtonDefaults.CornerRadius |
Corner radius for the button shape. |
isEnabled |
Boolean |
true |
Enables or disables the button. |
iosIcon |
String? |
null |
iOS-specific SF Symbol name (e.g., "star.fill" ). |
androidIcon |
DrawableResource? |
null |
Android-specific drawable resource ID. |
KIconButtonColors
🎨 Defines the visual appearance of the button based on its state.
Property | Type | Description |
---|---|---|
containerColor |
Color |
Background color for the enabled state. |
contentColor |
Color |
Icon and text color in enabled state. |
disabledContainerColor |
Color |
Background color when disabled. |
disabledContentColor |
Color |
Icon/text color when disabled. |
KIconButtonDefaults
🧰 Default values used by KIconButton
.
Property | Type | Default Value | Description |
---|---|---|---|
colors() |
Function | Predefined color set | Returns default color scheme. |
FontSize |
TextUnit |
14.sp |
Default font size. |
CornerRadius |
Double |
8.0 |
Default corner radius. |
✅ Usage Example
KIconButton(
modifier = Modifier
.fillMaxWidth(),
title = "Favourite",
iosIcon = "star.fill", // ✅ Use SF Symbols on iOS
androidIcon = Res.drawable.ic_star, // ✅ Use drawables for Android
onClick = {
println("Icon Button Pressed")
}
)
🔹 Note:
- On iOS, always use a valid SF Symbol (e.g.,
"star.fill"
).- On Android, provide a proper drawable resource (e.g.,
Res.drawable.ic_star
).