core/com.orange.ouds.core.component/OudsTag

OudsTag

@Composable
fun OudsTag(label: String, modifier: Modifier = Modifier, icon: OudsTagIcon? = null, hierarchy: OudsTagHierarchy = OudsTagDefaults.Hierarchy, status: OudsTagStatus = OudsTagDefaults.Status, roundedCorners: Boolean = true, size: OudsTagSize = OudsTagDefaults.Size, loader: OudsTagLoader? = null)

A tag is a small element that shows short info like a label, keyword, or category. It helps users quickly find, group, or understand content.

Tags have seven status depending on the context of the information they represent. Each state is designed to convey a specific meaning and ensure clarity in communication.

Four different layouts are supported:

  • Text only: when icon is null, the tag displays only text. Used for simple labels, categories, or keywords without additional visual elements.

  • Text and bullet: when icon is equal to OudsTagIcon.Bullet, the tag displays a small indicator (bullet) alongside the text. Used to show status, presence, or activity next to the label.

  • Text and icon: when icon is not null, the tag includes an icon before the text. Used to visually reinforce the meaning of the tag, such as status, type, or action.

  • Text and loader: when loader is true, the tag combines a loading spinner (or progress indicator) with text. Used to indicate that a process or action related to the tag is in progress.

Design

Guidelinesunified-design-system.orange.com
Version1.2.0

Parameters

label

The label displayed in the tag.

modifier

Modifier applied to the tag.

icon

The icon displayed before the label, or null if there is no icon.

hierarchy

The importance of the tag. Its background color and its content color are based on this hierarchy combined with the status of the tag.

status

The status of the tag. Its background color and its content color are based on this status combined with the hierarchy of the tag. A tag with loading spinner cannot have an OudsTagStatus.Disabled status. This will throw an IllegalStateException.

roundedCorners

Controls the shape of the tag. When true, the tag has rounded corners, providing a softer and more approachable look, suitable for most modern interfaces. When false, the tag has sharp, square corners, providing a more formal, structured, or technical feel. Often used in business context to label promotions, offers or important notices.

size

The size of the tag.

loader

An optional loading spinner (or progress indicator) displayed before the label. Used to indicate that a process or action related to the tag is in progress. A tag with an OudsTagStatus.Disabled status cannot have a loader. This will throw an IllegalStateException.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsTag
import com.orange.ouds.core.component.OudsTagIcon
import com.orange.ouds.core.component.OudsTagSize
import com.orange.ouds.core.component.OudsTagStatus
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsTag(
    label = "Tag",
    status = OudsTagStatus.Positive,
    size = OudsTagSize.Small
) 
   //sampleEnd
}
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsTag
import com.orange.ouds.core.component.OudsTagIcon
import com.orange.ouds.core.component.OudsTagSize
import com.orange.ouds.core.component.OudsTagStatus
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsTag(
    label = "Tag",
    icon = OudsTagIcon.Bullet,
    status = OudsTagStatus.Positive
) 
   //sampleEnd
}
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsTag
import com.orange.ouds.core.component.OudsTagIcon
import com.orange.ouds.core.component.OudsTagSize
import com.orange.ouds.core.component.OudsTagStatus
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsTag(
    label = "Tag",
    icon = OudsTagIcon(imageVector = Icons.Filled.FavoriteBorder),
    status = OudsTagStatus.Positive
) 
   //sampleEnd
}