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

Pill

fun Pill(label: String, modifier: Modifier = Modifier, leadingItem: PillLeadingItem? = null, @DrawableRes trailingIconId: Int? = null, @IntRange(from = 0) badgeValue: Int? = null, enabled: Boolean = true, size: PillSize = PillSize.Medium, selected: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)(source)

Pill component with Icon and Badge 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 Pill with a badge by at minimum providing a title, a trailingIcon, a badge value, and an action. The action is either a method or closure property that does something when a user clicks the pill. The label is a String that describes an attribute or unit of data. The icon is a DrawableRes id and must point to either fully rasterized images (ex. PNG or JPG files) or VectorDrawable xml assets, and the value the amount if selected items.

Parameters

label

The text to be displayed.

modifier

Modifier to be applied to the Pill.

leadingItem

Leading item to be displayed, Icons, Thumbnails.

trailingIconId

Resource Id to query the image file from.

badgeValue

Allows quantity data to help communicate the amount of selected items, it will only show if selected and value is different from zero.

enabled

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

size

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

selected

Controls to display state of the pill.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this component.

onClick

Will be called when the user clicks the Pill.

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Pill
import net.ikea.skapa.ui.components.PillLeadingItem
import net.ikea.skapa.ui.components.PillSize

fun main() { 
   //sampleStart 
   SkapaTheme2(isSystemInDarkTheme()) {
    var pillState by remember { mutableStateOf(true) }
    Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
        // No Icons
        Pill(
            label = "Category",
            selected = pillState,
            leadingItem = null,
            trailingIconId = null,
            badgeValue = null
        ) {
            pillState = !pillState
        }

        // Icon
        Pill(
            label = "Category",
            leadingItem = PillLeadingItem.Icon(R.drawable.ic_image_fallback_image),
            trailingIconId = null,
            badgeValue = null,
            size = PillSize.Medium,
            selected = pillState
        ) { pillState = !pillState }

        // Thumbnail
        Pill(
            label = "Category",
            leadingItem = PillLeadingItem.Thumbnail(painterResource(id = R.drawable.ic_image_fallback_image)),
            trailingIconId = null,
            badgeValue = null,
            size = PillSize.Small,
            selected = pillState
        ) {
            pillState = !pillState
        }
    }
} 
   //sampleEnd
}

Pill

Parameters

See also

Samples