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

Pill

@Composable
fun Pill(label: String, modifier: Modifier = Modifier, enabled: Boolean = true, size: PillSize = PillSize.Medium, selected: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

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 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 an attribute or unit of data.

Parameters

label

The text to be displayed.

modifier

Modifier to be applied to the Pill.

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

See also

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

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

        // Icon
        Pill(
            label = "Category",
            iconId = R.drawable.ic_image_fallback_image,
            size = PillSize.Medium,
            selected = pillState
        ) { pillState = !pillState }

        // Thumbnail
        Pill(
            label = "Category",
            thumbnail = painterResource(id = R.drawable.ic_image_fallback_image),
            size = PillSize.Small,
            selected = pillState
        ) {
            pillState = !pillState
        }
    }
} 
   //sampleEnd
}
@Composable
fun Pill(label: String, @DrawableRes iconId: Int, modifier: Modifier = Modifier, enabled: Boolean = true, size: PillSize = PillSize.Medium, selected: Boolean = false, iconPosition: IconPosition.Horizontal = IconPosition.Horizontal.Leading, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

Pill component with Icon 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 an icon by at minimum providing a title, an icon, 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.

Parameters

label

The text to be displayed.

iconId

Resources object to query the image file from.

modifier

Modifier to be applied to the Pill.

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.

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

See also

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

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

        // Icon
        Pill(
            label = "Category",
            iconId = R.drawable.ic_image_fallback_image,
            size = PillSize.Medium,
            selected = pillState
        ) { pillState = !pillState }

        // Thumbnail
        Pill(
            label = "Category",
            thumbnail = painterResource(id = R.drawable.ic_image_fallback_image),
            size = PillSize.Small,
            selected = pillState
        ) {
            pillState = !pillState
        }
    }
} 
   //sampleEnd
}
@Composable
fun Pill(label: String, thumbnail: Painter, modifier: Modifier = Modifier, enabled: Boolean = true, size: PillSize = PillSize.Medium, selected: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

Pill component with Thumbnail 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 thumbnail by at minimum providing a title, a thumbnail, 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 thumbnail is Painter with an image data to help communicate the pill value.

Parameters

label

The text to be displayed.

thumbnail

Painter to draw inside the Pill.

modifier

Modifier to be applied to the Pill.

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

See also

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

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

        // Icon
        Pill(
            label = "Category",
            iconId = R.drawable.ic_image_fallback_image,
            size = PillSize.Medium,
            selected = pillState
        ) { pillState = !pillState }

        // Thumbnail
        Pill(
            label = "Category",
            thumbnail = painterResource(id = R.drawable.ic_image_fallback_image),
            size = PillSize.Small,
            selected = pillState
        ) {
            pillState = !pillState
        }
    }
} 
   //sampleEnd
}
@Composable
fun Pill(label: String, @DrawableRes iconId: Int, @IntRange(from = 0) badgeValue: Int, modifier: Modifier = Modifier, enabled: Boolean = true, size: PillSize = PillSize.Medium, selected: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

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 an icon by at minimum providing a title, an icon, an 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.

iconId

Resources object 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.

modifier

Modifier to be applied to the Pill.

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

See also

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

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

        // Icon
        Pill(
            label = "Category",
            iconId = R.drawable.ic_image_fallback_image,
            size = PillSize.Medium,
            selected = pillState
        ) { pillState = !pillState }

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