ButtonVariant

Pre-defined styles for the Button component

See also

Samples

var loadingState by remember { mutableStateOf(false) }
val enabled = true
SkapaTheme2(darkTheme = isSystemInDarkTheme()) {
    Surface(color = SkapaTheme.colors.neutral1) {
        Column(
            modifier = Modifier
                .background(color = SkapaTheme.colors.neutral3)
                .padding(vertical = SkapaSpacing.space50),
            verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space75),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(label = "Primary", enabled = enabled, loading = loadingState, iconId = IconExample) { loadingState = !loadingState }
            Button(label = "Primary Small", enabled = enabled, loading = loadingState, size = ButtonSize.Small, iconId = IconExample) { }
            Button(label = "Secondary", enabled = enabled, loading = loadingState, variant = ButtonVariant.Secondary, iconId = IconExample) { }
            Button(label = "Tertiary", enabled = enabled, loading = loadingState, variant = ButtonVariant.Tertiary, iconId = IconExample) { }
            Button(label = "Danger", enabled = enabled, loading = loadingState, variant = ButtonVariant.Danger, iconId = IconExample) { }
            Button(
                label = "Emphasised",
                enabled = enabled,
                loading = loadingState,
                variant = ButtonVariant.Emphasised,
                iconId = IconExample
            ) { }

            Column(
                modifier = Modifier
                    .background(SkapaTheme.colors.staticIKEABrandBlue)
                    .padding(SkapaSpacing.space50),
                verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space75),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Button(
                    label = "ImageOverlay",
                    enabled = enabled,
                    loading = loadingState,
                    variant = ButtonVariant.ImageOverlay,
                    iconId = IconExample
                ) { }
                Button(
                    label = "Primary Inverse Static",
                    enabled = enabled,
                    loading = loadingState,
                    variant = ButtonVariant.Primary.InverseStatic,
                    iconId = IconExample
                ) { }
                Button(
                    label = "Secondary Inverse Static",
                    enabled = enabled,
                    loading = loadingState,
                    variant = ButtonVariant.Secondary.InverseStatic,
                    iconId = IconExample
                ) { }
                Button(
                    label = "Tertiary Inverse Static",
                    enabled = enabled,
                    loading = loadingState,
                    variant = ButtonVariant.Tertiary.InverseStatic,
                    iconId = IconExample
                ) { }
            }
        }
    }
}

Inheritors

Types

Link copied to clipboard
data object Danger : ButtonVariant
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
data object Primary : ButtonVariant
Link copied to clipboard
data object Secondary : ButtonVariant
Link copied to clipboard
data object Tertiary : ButtonVariant