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

Tag

@Composable
fun Tag(label: String, modifier: Modifier = Modifier, color: TagColor = TagColor.Default, iconResource: Int? = null, counter: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit? = null)

Tag is used to classify and link to content.

Parameters

label

Text label.

modifier

Modifier to be applied to the layout of the component.

color

Colors of choice for the component background.

iconResource

Optional leading icon.

counter

Optional trailing counter label.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this component.

onClick

optional click action.

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.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Tag
import net.ikea.skapa.ui.components.TagColor

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column {
        Tag(label = "Label", color = TagColor.Default) {}
        Tag(label = "Label + icon", color = TagColor.Default, iconResource = R.drawable.ic_avatar_person) {}
        Tag(label = "Label + counter", color = TagColor.Default, counter = "8") {}
        Tag(label = "Label + icon + counter", color = TagColor.Default, iconResource = R.drawable.ic_avatar_person, counter = "8") {}
    }
} 
   //sampleEnd
}