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)

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

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

badgeValue

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

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
}

@Composable

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

Deprecated (with error)

This constructor is deprecated, use the one with leadingItem, trailingIconId, and badgeValue instead

Replace with

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

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

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

Deprecated (with error)

This constructor is deprecated, use the one with leadingItem, trailingIconId, and badgeValue instead

Replace with

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

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

@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 (with error)

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, badgeValue = 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.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
}

@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 (with error)

Use function with leadingItem

Replace with

Pill(label = label, modifier = modifier, enabled = enabled, size = size, selected = selected, leadingItem = PillLeadingItem.Thumbnail(thumbnail), trailingIconId = null, badgeValue = null, interactionSource = interactionSource, 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.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
}

@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 (with error)

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

Deprecated (with error)

Replace with

Parameters

See also

Samples

Deprecated (with error)

Replace with

Parameters

See also

Samples

Deprecated (with error)

Replace with

Parameters

See also

Samples

Deprecated (with error)

Replace with

Parameters

See also

Samples

Deprecated (with error)

Replace with

Parameters

See also

Samples