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

IconButton

@Composable
fun IconButton(iconResource: Int, contentDescription: String?, modifier: Modifier = Modifier, enabled: Boolean = true, variant: IconButtonVariant = IconButtonVariant.Primary, size: IconButtonSize = IconButtonSize.Medium, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, loading: Boolean = false, onClick: () -> Unit)

Icon Button component a button for compact spaces that is labelled with an icon instead of text. 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 an icon and an action. The action is either a method or closure property that does something when a user clicks the button. The icon is a DrawableRes id and must point to either fully rasterized images (ex. PNG or JPG files) or VectorDrawable xml assets.

Parameters

iconResource

Resources object to query the image file from.

contentDescription

text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar.

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

IconButtonVariant defines the button style from Skapa IconButton Variants. The default value is IconButtonVariant.Primary.

size

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

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.

loading

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

onClick

Will be called when the user clicks the button.

See also

Samples

import androidx.compose.foundation.background
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.IconButton
import net.ikea.skapa.ui.components.IconButtonSize
import net.ikea.skapa.ui.components.IconButtonVariant

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    var loadingState by remember { mutableStateOf(false) }
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(SkapaTheme.colors.neutral3)
            .padding(SkapaSpacing.space100),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Column(
            modifier = Modifier.weight(1f),
            verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)
        ) {
            Text(
                text = "Show availability",
                style = SkapaTheme.typesets.heading.headingS
            )
            Text(
                text = "Select warehouse or post-number to see what is in stock",
                style = SkapaTheme.typesets.body.bodyS
            )
        }
        IconButton(
            iconResource = R.drawable.ic_iconbutton_sample_gear,
            contentDescription = "",
            variant = IconButtonVariant.Primary,
            size = IconButtonSize.Small,
            loading = loadingState
        ) {
            /* Do something */
            loadingState = !loadingState
        }
    }
} 
   //sampleEnd
}