core/com.orange.ouds.core.component/OudsBadge

OudsBadge

fun OudsBadge(modifier: Modifier = Modifier, enabled: Boolean = true, status: OudsBadgeStatus = OudsBadgeDefaults.Status, size: OudsBadgeSize = OudsBadgeDefaults.Size)

The badge is a small UI element used to highlight status, notifications, or categorization within an interface. It is often displayed as a label or indicator with a distinct background color and text.

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

This version of the badge renders as a static label without a number. It is used for status indicators (e.g., "New", "Pending", "Success"). The size remains unchanged despite the increase in the interface size.

A11Y recommendation: Provide a contentDescription semantics to clarify the meaning of this badge.

See BadgedBox for a top level layout that will properly place the badge relative to content such as text or an icon.

Design

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

Parameters

modifier

The Modifier to be applied to this badge.

enabled

Controls the enabled appearance of the badge.

status

The status of this badge. The background color of the badge is based on this status.

size

The size of this badge.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsBadge
import com.orange.ouds.core.component.OudsBadgeIcon
import com.orange.ouds.core.component.OudsBadgeSize
import com.orange.ouds.core.component.OudsBadgeStatus
import com.orange.ouds.core.component.OudsIconBadgeStatus
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsBadge(
    modifier = Modifier.semantics {
        contentDescription = "Information"
    },
    status = OudsBadgeStatus.Info,
    size = OudsBadgeSize.Small
) 
   //sampleEnd
}

@Composable

fun OudsBadge(count: Int, modifier: Modifier = Modifier, enabled: Boolean = true, status: OudsBadgeStatus = OudsBadgeDefaults.Status, size: OudsBadgeSize = OudsBadgeDefaults.Size)

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

This version of the badge displays numerical values (e.g., unread messages, notifications).

A11Y recommendation: Provide a more explicit contentDescription than the count alone by using a semantics Modifier.

See BadgedBox for a top level layout that will properly place the badge relative to content such as text or an icon.

Design

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

Parameters

count

The number displayed in the badge. Minimum and maximum values are 0 and 99 respectively. Values greater than 99 are displayed as "+99".

modifier

The Modifier to be applied to this badge.

enabled

Controls the enabled appearance of the badge.

status

The status of this badge. The background color of the badge and the number color are based on this status.

size

The size of this badge. The number is not displayed when size is OudsBadgeSize.ExtraSmall or OudsBadgeSize.Small.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsBadge
import com.orange.ouds.core.component.OudsBadgeIcon
import com.orange.ouds.core.component.OudsBadgeSize
import com.orange.ouds.core.component.OudsBadgeStatus
import com.orange.ouds.core.component.OudsIconBadgeStatus
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   val count = 10
OudsBadge(
    modifier = Modifier.semantics {
        contentDescription = "$count unread emails"
    },
    status = OudsBadgeStatus.Info,
    count = count
) 
   //sampleEnd
}

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsBadge
import com.orange.ouds.core.component.OudsBadgeIcon
import com.orange.ouds.core.component.OudsBadgeSize
import com.orange.ouds.core.component.OudsBadgeStatus
import com.orange.ouds.core.component.OudsIconBadgeStatus
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   NavigationBar {
    NavigationBarItem(
        icon = {
            BadgedBox(
                badge = {
                    val count = 8
                    OudsBadge(
                        modifier = Modifier.semantics {
                            contentDescription = "$count new notifications"
                        },
                        count = count,
                        status = OudsBadgeStatus.Accent
                    )
                }
            ) {
                Icon(
                    imageVector = Icons.Filled.Star,
                    contentDescription = "Favorite"
                )
            }
        },
        selected = false,
        onClick = {}
    )
} 
   //sampleEnd
}

@Composable

fun OudsBadge(modifier: Modifier = Modifier, enabled: Boolean = true, status: OudsIconBadgeStatus = OudsBadgeDefaults.WithIconStatus, size: OudsBadgeSize = OudsBadgeDefaults.Size)

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

This version of the badge displays an icon to visually reinforce meaning.

A11Y recommendation: Provide a contentDescription semantics to clarify the meaning of this badge.

See BadgedBox for a top level layout that will properly place the badge relative to content such as text or an icon.

Design

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

Parameters

modifier

The Modifier to be applied to this badge.

enabled

Controls the enabled appearance of the badge.

status

The status of this badge. The background color of the badge and the icon color are based on this status. There are two types of status:

Non-functional statuses: OudsIconBadgeStatus.Neutral or OudsIconBadgeStatus.Accent Using a non-functional status, you can provide a custom icon related to the badge’s context to enhance recognition by providing an OudsBadgeIcon as the icon of the status.
Functional statuses: OudsTagStatus.Positive, OudsTagStatus.Warning, OudsTagStatus.Negative, OudsTagStatus.Info. Each functional status has its dedicated functional icon that matches the meaning of the badge.

size

The size of this badge. The icon is not displayed when size is OudsBadgeSize.ExtraSmall or OudsBadgeSize.Small.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsBadge
import com.orange.ouds.core.component.OudsBadgeIcon
import com.orange.ouds.core.component.OudsBadgeSize
import com.orange.ouds.core.component.OudsBadgeStatus
import com.orange.ouds.core.component.OudsIconBadgeStatus
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsBadge(
    modifier = Modifier.semantics {
        contentDescription = "Information"
    },
    status = OudsIconBadgeStatus.Info,
    size = OudsBadgeSize.Large
) 
   //sampleEnd
}

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.BadgedBox
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsBadge
import com.orange.ouds.core.component.OudsBadgeIcon
import com.orange.ouds.core.component.OudsBadgeSize
import com.orange.ouds.core.component.OudsBadgeStatus
import com.orange.ouds.core.component.OudsIconBadgeStatus
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsBadge(
    modifier = Modifier.semantics {
        contentDescription = "Favorite"
    },
    status = OudsIconBadgeStatus.Accent(
        OudsBadgeIcon(imageVector = Icons.Filled.FavoriteBorder)
    ),
    size = OudsBadgeSize.Large
) 
   //sampleEnd
}