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)
}

Tag Intent "Surface"

The Surface intent is designed to display tags on images or visually heavy surfaces. Important: The Surface intent can only be used with TagFilled. Using it with TagOutlined or TagTinted will result in an error.

TagFilled(text = "Featured", intent = TagIntent.Surface)

Tag "Highlight"

The Highlight tag allows you to temporarily highlight new features of the product. It draws users attention to new features or important updates.

Light	Dark

Important Usage Guidelines:

• Use this component exceptionally to avoid visual overload

• Always prioritize the elements being highlighted

• Implement with an End-of-Life Remote Config to prevent indefinite production presence

TagHighlight()