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

OudsTag

fun OudsTag(label: String, modifier: Modifier = Modifier, enabled: Boolean = true, appearance: OudsTagAppearance = OudsTagDefaults.Appearance, 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 status icon is null, the tag displays only text. Used for simple labels, categories, or keywords without additional visual elements.
Text and bullet: when status 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 status 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

Guidelines	unified-design-system.orange.com
Version	1.4.0

Parameters

label

The label displayed in the tag.

modifier

Modifier applied to the tag.

enabled

Controls the enabled appearance of the tag. A tag with loading spinner cannot be disabled. This will throw an IllegalStateException.

appearance

Appearance of the tag among OudsTagAppearance values. Combined with the status of the tag, the appearance determines tag's background and content colors.

status

The status of the tag. Its background color and its content color are based on this status combined with the appearance of the tag. There are two types of status:

Non-functional statuses (OudsTagStatus.Neutral or OudsTagStatus.Accent) used to display categories, default states, or to draw attention without carrying a specific functional meaning (unlike functional tags such as success, info, etc.). Using a non-functional status, you can provide a custom icon related to the tag’s context to enhance recognition by providing an OudsTagIcon.Custom as the icon of the status.
Functional statuses communicate specific information or system feedback: OudsTagStatus.Positive, OudsTagStatus.Warning, OudsTagStatus.Negative, OudsTagStatus.Info. Each functional status has its dedicated functional icon that matches the meaning of the tag. This icon will appear by providing OudsTagIcon.Default as icon value of the status.

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 disabled tag 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",
    status = OudsTagStatus.Positive(icon = OudsTagIcon.Bullet)
) 
   //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",
    status = OudsTagStatus.Positive(icon = OudsTagIcon.Default)
) 
   //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",
    status = OudsTagStatus.Neutral(icon = OudsTagIcon.Custom(imageVector = Icons.Filled.FavoriteBorder))
) 
   //sampleEnd
}