OudsTag
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 six statuses depending on the context of the information they represent. Each status is designed to convey a specific meaning and ensure clarity in communication.
Four different layouts are supported:
Text only: when status asset is
null, the tag displays only text. Used for simple labels, categories, or keywords without additional visual elements.Text and bullet: when status asset is equal to OudsTagAsset.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 asset is an OudsTagAsset.Icon or an OudsTagAsset.Icon.Default, 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 not
null, 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
The label displayed in the tag.
Modifier applied to the tag.
Controls the enabled appearance of the tag. A tag with a loading spinner cannot be disabled. This will throw an IllegalStateException.
Appearance of the tag among OudsTagAppearance values. Combined with the status of the tag, the appearance determines the tag's background and content colors.
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 statuses:
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 an icon related to the tag’s context to enhance recognition by providing an OudsTagAsset.Icon as the asset 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 OudsTagAsset.Icon.Default as the asset of the status.
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 a business context to label promotions, offers or important notices.
The size of the tag.
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.OudsTagAsset
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.OudsTagAsset
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(asset = OudsTagAsset.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.OudsTagAsset
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(asset = OudsTagAsset.Icon.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.OudsTagAsset
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(asset = OudsTagAsset.Icon(imageVector = Icons.Filled.FavoriteBorder))
)
//sampleEnd
}