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

Link copied to clipboard
data class TagColors(val backgroundColor: Color, val contentColor: Color)
Link copied to clipboard
Link copied to clipboard

TagIntent is used to define the intent of the tag.

Functions

Link copied to clipboard
fun TagFilled(modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null, content: @Composable RowScope.() -> Unit)
fun TagFilled(text: AnnotatedString, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)
fun TagFilled(text: String, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)

Filled tag represent main information

Link copied to clipboard
fun TagOutlined(modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null, content: @Composable RowScope.() -> Unit)
fun TagOutlined(text: AnnotatedString, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)
fun TagOutlined(text: String, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)

Outlined tag represent support information

Link copied to clipboard
fun TagTinted(modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null, content: @Composable RowScope.() -> Unit)
fun TagTinted(text: AnnotatedString, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)
fun TagTinted(text: String, modifier: Modifier = Modifier, intent: TagIntent = TagIntent.Basic, leadingIcon: SparkIcon? = null, tint: Color? = null)

Tinted tag represent support information like OutlinedTag