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

ProductIdentifier

@Composable
fun ProductIdentifier(value: String, modifier: Modifier = Modifier, label: String? = null, variant: ProductIdentifierVariant = Emphasised)

Product Identifier component is a label that displays numbers related to the identification or the store location of an IKEA range product. It is built on top of androidx.compose.material3.Text and comes with pre-defined appearance based on Skapa design and guidelines.

The Article Number and Location Code variants are to be used with a label representing what information is being displayed according to the Skapa design guidelines. The Cabinet Code variant does not need a label.

Parameters

value

The text to be displayed inside the component.

modifier

Modifier to be applied to the ProductIdentifier.

label

The text to be displayed above the component.

variant

ProductIdentifierVariant defines the Product Identifier styles. The default value is ProductIdentifierVariant.Emphasised.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.ProductIdentifier
import net.ikea.skapa.ui.components.ProductIdentifierVariant

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.padding(SkapaSpacing.space50)) {
        // Article number - Emphasised and Subtle
        ProductIdentifier("123.456.78", label = "Article number")
        Spacer(Modifier.height(SkapaSpacing.space100))
        ProductIdentifier("123.456.78", label = "Article number", variant = ProductIdentifierVariant.Subtle)
        Spacer(Modifier.height(SkapaSpacing.space200))

        // Location Code - Emphasised and Subtle
        Row(horizontalArrangement = Arrangement.spacedBy(SkapaSpacing.space75)) {
            // Combine 2 Product identifiers to get the Aisle + Bin setup
            ProductIdentifier("4", label = "Aisle")
            ProductIdentifier("123", label = "Bin")
        }
        Spacer(Modifier.height(SkapaSpacing.space100))
        Row(horizontalArrangement = Arrangement.spacedBy(SkapaSpacing.space75)) {
            // Combine 2 Product identifiers to get the Aisle + Bin setup
            ProductIdentifier("4", label = "Aisle", variant = ProductIdentifierVariant.Subtle)
            ProductIdentifier("123", label = "Bin", variant = ProductIdentifierVariant.Subtle)
        }
        Spacer(Modifier.height(SkapaSpacing.space200))

        // Cabinet Code
        Row {
            // Combine 2 Product identifiers with Subtle and Emphasised to get the Cabinet code look
            ProductIdentifier("ME", variant = ProductIdentifierVariant.Subtle)
            ProductIdentifier("321")
        }
    }
} 
   //sampleEnd
}