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

OudsBadge

fun OudsBadge(modifier: Modifier = Modifier, status: OudsBadge.Status = OudsBadgeDefaults.Status, size: OudsBadge.Size = 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.

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.1.0

Parameters

modifier

The Modifier to be applied to this 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.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsBadge(
    status = OudsBadge.Status.Info,
    size = OudsBadge.Size.Small
) 
   //sampleEnd
}

@Composable

fun OudsBadge(count: Int, modifier: Modifier = Modifier, status: OudsBadge.Status = OudsBadgeDefaults.Status, size: OudsBadge.Size = 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).

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.1.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.

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 OudsBadge.Size.ExtraSmall or OudsBadge.Size.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.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsBadge(
    icon = OudsBadge.Icon(
        imageVector = Icons.Filled.FavoriteBorder,
        contentDescription = "Content description"
    ),
    status = OudsBadge.Status.Info,
    size = OudsBadge.Size.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.utilities.OudsPreview

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

@Composable

fun OudsBadge(icon: OudsBadge.Icon, modifier: Modifier = Modifier, status: OudsBadge.Status = OudsBadgeDefaults.Status, size: OudsBadge.Size = 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.

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.1.0

Parameters

icon

The icon displayed in the badge.

modifier

The Modifier to be applied to this badge.

status

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

size

The size of this badge. The icon is not displayed when size is OudsBadge.Size.ExtraSmall or OudsBadge.Size.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.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsBadge(
    icon = OudsBadge.Icon(
        imageVector = Icons.Filled.FavoriteBorder,
        contentDescription = "Content description"
    ),
    status = OudsBadge.Status.Info,
    size = OudsBadge.Size.Large
) 
   //sampleEnd
}