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

IconPill

@Composable
fun IconPill(@DrawableRes iconResource: Int, contentDescription: String?, modifier: Modifier = Modifier, enabled: Boolean = true, size: IconPillSize = IconPillSize.Medium, selected: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

Icon Pill component is a button that represents an attribute or unit of data. 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 icon is a DrawableRes id and must point to either fully rasterized images (ex. PNG or JPG files) or VectorDrawable xml assets. The action is either a method or closure property that does something when a user clicks the button.

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 IconPill.

enabled

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

size

IconPillSize defines the size of the pill. The default value is IconPillSize.Medium.

selected

Controls to display state of the pill.

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 IconPill.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.IconExample
import net.ikea.skapa.ui.components.IconPill
import net.ikea.skapa.ui.components.IconPillSize

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
        var state by remember { mutableStateOf(false) }
        IconPill(
            iconResource = IconExample,
            contentDescription = "Content Description",
            enabled = true,
            selected = state
        ) {
            /* Do something*/
            state = !state // Change State
        }
        IconPill(
            iconResource = IconExample,
            contentDescription = null,
            size = IconPillSize.Small,
            selected = state
        ) {
            /* Do something*/
            state = !state // Change State
        }
    }
} 
   //sampleEnd
}