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

Badge

@Composable
fun Badge(variant: BadgeVariant, color: BadgeColor, modifier: Modifier = Modifier)

Badge is a non-interactable component for informational purposes.

One component, various use cases. The Badge component cover a wide range of use cases, ranging from a non-interactable text label badge to a badge with numerical values or an icon applied.

In combination with other components, such as Avatar for example, it can be used as a notification or status badge.

Parameters

variant

Text, Icon and Text+Icon variants. BadgeVariant.Text is the only one supporting BadgeSize.Small hence the param is not added to the other variant.

color

Colors of choice for the component background.

modifier

Modifier to be applied to the layout of the component.

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.Badge
import net.ikea.skapa.ui.components.BadgeColor
import net.ikea.skapa.ui.components.BadgeVariant

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column {
        // Example of the Bade variants
        Badge(variant = BadgeVariant.Text(label = "Text"), color = BadgeColor.Gray)
        Badge(
            variant = BadgeVariant.Icon(iconResource = R.drawable.ic_avatar_person, contentDescription = "contentDescription"),
            color = BadgeColor.Black
        )
        Badge(variant = BadgeVariant.TextIcon(label = "Text", R.drawable.ic_avatar_person), color = BadgeColor.White)
    }
} 
   //sampleEnd
}