ButtonVariant

sealed class ButtonVariant

Pre-defined styles for the Button component

See also

Samples

import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.annotation.DrawableRes
import androidx.compose.animation.core.Animatable
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.Interaction
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.progressSemantics
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.IconExample
import net.ikea.skapa.ui.IconPosition
import net.ikea.skapa.ui.motion.SkapaAnimation
import net.ikea.skapa.ui.motion.VerticalTransition
import net.ikea.skapa.ui.theme.*
import net.ikea.skapa.ui.util.FocusBorderType
import net.ikea.skapa.ui.util.KeyboardNavigationProps.TotalBorderWidth
import net.ikea.skapa.ui.util.animatedRoundedBackground
import net.ikea.skapa.ui.util.buttonTextStyle
import net.ikea.skapa.ui.util.focusableWithBorder
import net.ikea.skapa.ui.util.minimumTouchTargetSize
import net.ikea.skapa.ui.util.pointerHoverHandIcon
import net.ikea.skapa.ui.util.rememberSkapaButtonIndication

fun main() { 
   //sampleStart 
   var loadingState by remember { mutableStateOf(false) }
val enabled = true
SkapaThemeM3(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
                ) { }
            }
        }
    }
} 
   //sampleEnd
}

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
Link copied to clipboard
data object Secondary : ButtonVariant
Link copied to clipboard
Link copied to clipboard
data object Tertiary : ButtonVariant
Link copied to clipboard