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

CommercialMessage

@Composable
fun CommercialMessage(value: String, type: CommercialMessageType, modifier: Modifier = Modifier, variant: CommercialMessageVariant = Emphasised, size: CommercialMessageSize = CommercialMessageSize.Small)

Commercial Message component is a badge that adorns range products with an IKEA sales steering category. It is built on top of androidx.compose.material3.Text and comes with pre-defined appearance based on Skapa design and guidelines.

Parameters

value

The text to be displayed inside the component.

type

defines the Commercial Message type style. There is no default type, it always has to be declared.

modifier

Modifier to be applied to the CommercialMessage.

variant

CommercialMessageVariant defines the Commercial Message variant. The default variant is CommercialMessageVariant.Emphasised.

size

CommercialMessageSize defines the Commercial Message size. The default size is CommercialMessageSize.Small.

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.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.CommercialMessage
import net.ikea.skapa.ui.components.CommercialMessageType
import net.ikea.skapa.ui.components.CommercialMessageVariant

fun main() { 
   //sampleStart 
   SkapaTheme2(darkTheme = isSystemInDarkTheme()) {
    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceEvenly) {
        // New
        CommercialMessage("New", CommercialMessageType.New)
        CommercialMessage("New", CommercialMessageType.New, variant = CommercialMessageVariant.Subtle)

        // New lower price
        CommercialMessage("New lower price", CommercialMessageType.NewLowerPrice)
        CommercialMessage("New lower price", CommercialMessageType.NewLowerPrice, variant = CommercialMessageVariant.Subtle)

        // IKEA Family price
        CommercialMessage("IKEA Family price", CommercialMessageType.IkeaFamilyPrice)
        CommercialMessage("IKEA Family price", CommercialMessageType.IkeaFamilyPrice, variant = CommercialMessageVariant.Subtle)
    }
} 
   //sampleEnd
}