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

Pill

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.

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.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, modifier: Modifier = Modifier, leadingItem: PillLeadingItem? = null, @DrawableRes trailingIconId: Int? = null, enabled: Boolean = true, size: PillSize = PillSize.Medium, selected: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

Parameters

label

The text to be displayed.

modifier

Modifier to be applied to the Pill.

leadingItem

Leading item to be displayed, Icons, Thumbnails.

trailingIconId

Resources object to query the image file from.

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.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, @IntRange(from = 0) badgeValue: Int, @DrawableRes trailingIconId: Int, modifier: Modifier = Modifier, leadingItem: PillLeadingItem? = null, 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 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.

badgeValue

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

trailingIconId

Resources object to query the image file from. from zero.

modifier

Modifier to be applied to the Pill.

leadingItem

Leading item to be displayed, Icons, Thumbnails.

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

Deprecated

Use function with leadingItem and trailingIconId

Replace with

Pill(label = label, modifier = modifier, enabled = enabled, size = size, selected = selected, leadingItem = if (iconPosition == IconPosition.Horizontal.Leading) PillLeadingItem.Icon(iconId) else null, trailingIconId = if (iconPosition == IconPosition.Horizontal.Trailing) iconId else null, interactionSource = interactionSource, onClick = onClick)

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.

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

Deprecated

Use function with leadingItem

Replace with

Pill(label = label, modifier = modifier, enabled = enabled, size = size, selected = selected, leadingItem = PillLeadingItem.Thumbnail(thumbnail), interactionSource = interactionSource, trailingIconId = null, onClick = onClick)

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.

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

Deprecated

Use function with leadingItem and trailingIconId

Replace with

Pill(label = label, modifier = modifier, enabled = enabled, size = size, selected = selected, leadingItem = null, trailingIconId = iconId, badgeValue = badgeValue, interactionSource = interactionSource, onClick = onClick)

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

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

Pill

Parameters

See also

Samples

Parameters

See also

Samples

Parameters

See also

Samples

Deprecated

Replace with

Parameters

See also

Samples

Deprecated

Replace with

Parameters

See also

Samples

Deprecated

Replace with

Parameters

See also

Samples