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

IconButton

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)(source)

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.

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.

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 
   SkapaTheme2(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.typography.headingS
            )
            Text(
                text = "Select warehouse or post-number to see what is in stock",
                style = SkapaTheme.typography.bodyS
            )
        }
        IconButton(
            iconResource = R.drawable.ic_iconbutton_sample_gear,
            contentDescription = "Show availability",
            variant = IconButtonVariant.Primary,
            size = IconButtonSize.Small,
            loading = loadingState
        ) {
            /* Do something */
            loadingState = !loadingState
        }
    }
} 
   //sampleEnd
}

@Composable

Note: This version of the IconButton allows you to control the icon tinting.

Parameters

iconResource

Resources object to query the image file from.

contentDescription

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

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

iconTinting

Controls the icon tinting. When true, the icon will be tinted with the Skapa defined content color of the button. Use with caution.

onClick

Will be called when the user clicks the button.

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 
   SkapaTheme2(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.typography.headingS
            )
            Text(
                text = "Select warehouse or post-number to see what is in stock",
                style = SkapaTheme.typography.bodyS
            )
        }
        IconButton(
            iconResource = R.drawable.ic_iconbutton_sample_gear,
            contentDescription = "Show availability",
            variant = IconButtonVariant.Primary,
            size = IconButtonSize.Small,
            loading = loadingState
        ) {
            /* Do something */
            loadingState = !loadingState
        }
    }
} 
   //sampleEnd
}

IconButton

Parameters

See also

Samples

Parameters

See also

Samples