Design/net.ikea.skapa.ui.components/Button

Button

fun Button(label: String, modifier: Modifier = Modifier, enabled: Boolean = true, variant: ButtonVariant = ButtonVariant.Primary, size: ButtonSize = ButtonSize.Medium, loading: Boolean = false, @DrawableRes iconId: Int? = null, iconPosition: IconPosition.Horizontal = IconPosition.Horizontal.Leading, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

Button component is a control used to perform actions when triggered. It's built on top of androidx.compose.material.Button and comes with predefined appearance based on Skapa design and guidelines.

You create a button by at minimum providing a title and an action. The action is either a method or closure property that does something when a user clicks the button. The label is a String that describes the button's action.

The default Button style will match the ButtonVariant.Primary of Skapa. The text style for internal Text component will be set to match Skapa theme presets and font size provided from ButtonStyle.sizes property. Text color will match the colors provided on ButtonVariant property.

Parameters

label

The text to be displayed.

modifier

Modifier to be applied to the button

enabled

Controls the enabled state of the button. When false, this button will not be clickable

variant

ButtonVariant defines the button style from Skapa Button Variants. The default value is ButtonVariant.Primary.

size

ButtonSize defines the size of the button. The default value is ButtonSize.Medium.

Controls to display state of the button. When true, this button will display the LoadingBall instead the Text.

iconId

Resources object to query the image file from

iconPosition

IconPosition.Horizontal indicates where the icon will be displayed

interactionSource

The MutableInteractionSource representing the stream of Interactions for this component. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this component in different Interactions.

onClick

Will be called when the user clicks the button.

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Button
import net.ikea.skapa.ui.components.ButtonSize
import net.ikea.skapa.ui.components.ButtonVariant
import net.ikea.skapa.ui.components.CharacterCounterParams
import net.ikea.skapa.ui.components.Hyperlink
import net.ikea.skapa.ui.components.InputField

fun main() { 
   //sampleStart 
   var loadingState by remember { mutableStateOf(false) }
val enabled = true
val buttonLabel = "Label"
// Below is an example of a stand-alone Skapa Button which only toggles loading state on and off.
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column {
        Button(
            label = buttonLabel,
            modifier = Modifier,
            enabled = enabled,
            variant = ButtonVariant.Emphasised, // See https://skapa.ikea.net/components/actions/button#variants for variant guidelines.
            size = ButtonSize.Medium, // See https://skapa.ikea.net/components/actions/button#variants for sizing guidelines.
            loading = loadingState
            // You can specify icon and icon position using parameters below if needed
            // iconId = X,
            // iconPosition = IconPosition.Horizontal.LEADING
        ) {
            loadingState = !loadingState
        }
    }
} 
   //sampleEnd
}

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Button
import net.ikea.skapa.ui.components.ButtonSize
import net.ikea.skapa.ui.components.ButtonVariant
import net.ikea.skapa.ui.components.CharacterCounterParams
import net.ikea.skapa.ui.components.Hyperlink
import net.ikea.skapa.ui.components.InputField

fun main() { 
   //sampleStart 
   // Button variables
val loadingState by remember { mutableStateOf(false) }
val enabled = true

// Other variables
var hyperLinkActive by remember { mutableStateOf(false) }
var emailText by rememberSaveable { mutableStateOf("") }
var passwordText by rememberSaveable { mutableStateOf("") }

// Below is a contextual example of how to implement Skapa Button in the form of a log-in flow.
// Please note: THIS IS NOT AN EXAMPLE OF HOW TO CREATE A SAFE LOG-IN FLOW.
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    // TODO Update sample
    Column(
        modifier = Modifier
            .padding(SkapaSpacing.space125)
            .fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)
    ) {
        InputField(
            value = emailText,
            onChange = { emailText = it },
            label = "Email address",
            characterCounterParams = CharacterCounterParams.None
        )
        InputField(
            value = passwordText,
            onChange = { passwordText = it },
            label = "Password",
            characterCounterParams = CharacterCounterParams.None,
            visualTransformation = PasswordVisualTransformation()
        )
        Hyperlink(
            text = "Forgot password?",
            active = hyperLinkActive
        ) {
            hyperLinkActive = true
        }
        Button(
            label = "Log in",
            modifier = Modifier
                .fillMaxWidth() // Use .fillMaxWidth() to make button fluid.
                .padding(top = SkapaSpacing.space50),
            enabled = enabled,
            variant = ButtonVariant.Emphasised,
            size = ButtonSize.Medium,
            loading = loadingState
            // You can specify icon and icon position using parameters below if needed
            // iconId = X,
            // iconPosition = IconPosition.Horizontal.LEADING
        ) {
            // Do something
        }
        Button(
            label = "Sign up",
            modifier = Modifier.fillMaxWidth(),
            // Use .fillMaxWidth() to make button fluid.
            enabled = enabled,
            variant = ButtonVariant.Secondary,
            size = ButtonSize.Medium,
            loading = loadingState
            // You can specify icon and icon position using parameters below if needed
            // iconId = X,
            // iconPosition = IconPosition.Horizontal.LEADING
        ) {
            // Do something
        }
    }
} 
   //sampleEnd
}

Button

Parameters

See also

Samples