Animated, brand-neutral button component morphing between expanded label and circular loading states, with filled/outlined variants, multiple shapes, and customizable colors, borders, elevation, and typography.
An animated, brand-neutral Compose Multiplatform button for Kotlin Multiplatform — supporting Android, iOS, Desktop (JVM), and Web (Wasm/JS). It animates between an expanded label state and a collapsed circular loading state, with filled and outlined variants in several shapes.
Add the dependency to your commonMain source set:
// build.gradle.kts
kotlin {
sourceSets {
commonMain.dependencies {
implementation("io.github.john-safwat:kanimatedbutton:0.1.0")
}
}
}
import io.github.johnsafwat.kanimatedbutton.KAnimatedButton
import io.github.johnsafwat.kanimatedbutton.KAnimatedButtonType
var isLoading by remember { mutableStateOf(false) }
KAnimatedButton(
buttonType = KAnimatedButtonType.LARGE_RECTANGLE,
title = "Submit",
isEnabled = true,
isLoading = isLoading,
onClick = { isLoading = true },
)
Key parameters: buttonType (filled/outlined × rounded/rectangle in large/medium/small), or a custom
slot, , , , plus overrides for , , ,
, , and sizing. Default colors come from and are fully overridable.
A runnable showcase of every variant lives in app/shared App.kt.
This is a Kotlin Multiplatform project targeting Android, iOS, Web, Desktop (JVM), Server.
Use the run configurations provided by the run widget in your IDE's toolbar. You can also use these commands and options:
Use the run button in your IDE's editor gutter, or run tests using Gradle tasks:
./gradlew :app:shared:testAndroidHostTest./gradlew :app:shared:jvmTest./gradlew :server:testLearn more about Kotlin Multiplatform, Compose Multiplatform, Kotlin/Wasm…
We would appreciate your feedback on Compose/Web and Kotlin/Wasm in the public Slack channel #compose-web. If you face any issues, please report them on YouTrack.
titlechildisEnabledisLoadingwrapContentWidthcolorborderColorborderRadiuselevationtextStyleKAnimatedButtonDefaults/app/iosApp contains an iOS application. Even if you’re sharing your UI with Compose Multiplatform, you need this entry point for your iOS app. This is also where you should add SwiftUI code for your project.
/app/shared is for code that will be shared across your Compose Multiplatform applications. It contains several subfolders:
/core is for the code that will be shared between all targets in the project. The most important subfolder is commonMain. If preferred, you can add code to the platform-specific folders here too.
/server is for the Ktor server application.
./gradlew :app:androidApp:assembleDebug./gradlew :app:desktopApp:hotRun --auto./gradlew :app:desktopApp:run./gradlew :server:run./gradlew :app:webApp:wasmJsBrowserDevelopmentRun./gradlew :app:webApp:jsBrowserDevelopmentRun./gradlew :app:shared:wasmJsTest./gradlew :app:shared:jsTest./gradlew :app:shared:iosSimulatorArm64TestSurfaced from shared tags and platforms — no rankings paid for.