spark/com.adevinta.spark.components.tags

Package-level declarations

Tags are used to label content and help users quickly recognize info about them: Categories, Status… Can be applied with different colors and designs that are associated with a content due to its characteristics: new content, unvisited content, featured content… Users can’t interact with Tags.


Light
Dark

The minimal usage of the component is the text.

TagFilled(text = "Main")

The tags can also have a decorative start icon to better identify the context of the tag.

Layout

We don't provide any container for now but we recommend using a FlowRow to layout it in your screens.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    maxItemsInEachRow = 4,
) {
    TagFilled(text = "Tag 1", intent = TagIntent.Main)
    TagFilled(text = "Tag longer 2", intent = TagIntent.Accent)
    TagFilled(text = "Tag a bit longer 3", intent = TagIntent.Info)
    TagTinted(text = "Tag way more longer 4", intent = TagIntent.Main)
    TagTinted(text = "Tag small 5", intent = TagIntent.Main)
    TagOutlined(text = "Tag 6", intent = TagIntent.Main)
}

Types

TagColors

@Immutable

data class TagColors(val backgroundColor: Color, val contentColor: Color)

TagDefaults

object TagDefaults

TagIntent

enum TagIntent : Enum<TagIntent>

TagIntent is used to define the intent of the tag.

Functions

TagFilled

@Composable

fun TagFilled(modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null, content: @Composable RowScope.() -> Unit)

@Composable

fun TagFilled(text: AnnotatedString, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)

@Composable

fun TagFilled(text: String, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)

Filled tag represent main information

TagOutlined

@Composable

fun TagOutlined(modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null, content: @Composable RowScope.() -> Unit)

@Composable

fun TagOutlined(text: AnnotatedString, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)

@Composable

fun TagOutlined(text: String, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)

Outlined tag represent support information

TagTinted

@Composable

fun TagTinted(modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null, content: @Composable RowScope.() -> Unit)

@Composable

fun TagTinted(text: AnnotatedString, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)

@Composable

fun TagTinted(text: String, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)

Tinted tag represent support information like OutlinedTag