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.gestures.detectTapGestures
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.input.pointer.pointerInput
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
}