core/com.orange.ouds.core.component/OudsSmallListItem

OudsSmallListItem

fun OudsSmallListItem(label: String, modifier: Modifier = Modifier, contentAlignment: OudsListItemContentAlignment = OudsListItemDefaults.ContentAlignment, description: String? = null, leading: OudsSmallListItemLeading? = null, trailing: OudsSmallListItemTrailing? = null, divider: Boolean = true, background: Boolean = true, helperText: String? = null, boldLabel: Boolean = false, enabled: Boolean = true, interactionSource: MutableInteractionSource? = null)

TODO update description when available and add version and guideline link

Static small list item displays non-clickable information in a compact format.

A static small list item provides a condensed way to present read-only information. It is ideal for compact lists, quick settings displays, or dense information layouts. Unlike the standard list item, it omits overline and extra label to maintain a smaller footprint. These items are designed to be stacked within a list, with no spacing between the elements.

Parameters

label

The main label of the small list item.

modifier

Modifier applied to the layout of the small list item.

contentAlignment

Controls the vertical alignment of the content. Defaults to OudsListItemContentAlignment.CenterVertically.

description

Optional text displayed below the label.

leading

Optional leading content such as an icon or image displayed at the start of the small list item.

trailing

Optional trailing content such as an icon, image, or text displayed at the end of the small list item.

divider

Controls the display of a divider at the bottom of the small list item. Defaults to true.

background

Controls whether the small list item has a background color. Defaults to true.

helperText

Optional helper text displayed below the small list item.

boldLabel

Controls whether the label text is displayed in bold. Defaults to false.

enabled

Controls the enabled state of the small list item. When false, the content is displayed in a disabled state. Defaults to true.

interactionSource

Optional hoisted MutableInteractionSource for observing and emitting interactions for this small list item.

Samples

Column {
    OudsSmallListItem(
        label = "Notifications",
        description = "Push notifications enabled",
        leading = OudsSmallListItemLeading.Icon(
            imageVector = Icons.Outlined.Notifications,
            contentDescription = "Notifications icon"
        )
    )
    OudsSmallListItem(
        label = "Share",
        description = "Share app with friends",
        leading = OudsSmallListItemLeading.Icon(
            imageVector = Icons.Outlined.Share,
            contentDescription = "Share icon"
        )
    )
    OudsSmallListItem(
        label = "Settings",
        description = "App preferences",
        leading = OudsSmallListItemLeading.Icon(
            imageVector = Icons.Outlined.Settings,
            contentDescription = "Settings icon"
        )
    )
}

OudsSmallListItem(
    label = "Main label",
    description = "This is a description that provides additional context.",
    leading = OudsSmallListItemLeading.Icon(
        imageVector = Icons.Outlined.Favorite,
        contentDescription = "Favorite icon"
    ),
    trailing = OudsSmallListItemTrailing.Text(label = "99+", style = OudsListItemTextStyle.Label),
    helperText = "Helper text appears below the item",
    boldLabel = true,
    background = true,
    divider = true
)

OudsSmallListItem(
    label = "Compact view",
    description = "Quick access to content",
    leading = OudsSmallListItemLeading.Image(
        painter = CheckerboardPainter,
        contentDescription = "Content image",
        ratio = OudsListItemImageRatio.Square
    ),
    trailing = OudsSmallListItemTrailing.Text(label = "New", style = OudsListItemTextStyle.LabelStrong)
)

OudsSmallListItem(
    label = "Premium features",
    description = "Unlock exclusive content",
    leading = OudsSmallListItemLeading.Icon(
        painter = rememberRainbowHeartPainter(),
        contentDescription = "Premium icon",
        tinted = false
    )
)

@Composable

fun OudsSmallListItem(label: String, modifier: Modifier = Modifier, onClick: () -> Unit, indicator: OudsListItemIndicator = OudsListItemDefaults.Indicator, contentAlignment: OudsListItemContentAlignment = OudsListItemDefaults.ContentAlignment, description: String? = null, leading: OudsSmallListItemLeading? = null, trailing: OudsSmallListItemTrailing? = null, divider: Boolean = true, background: Boolean = false, helperText: String? = null, boldLabel: Boolean = false, enabled: Boolean = true, interactionSource: MutableInteractionSource? = null)

TODO update description when available and add version and guideline link

Navigation small list item allows users to navigate to another screen or perform an action in a compact format.

A navigation small list item is clickable and provides a condensed way to navigate. It is ideal for compact menus, quick settings with actions, or dense navigation lists. The indicator type can be customized to show forward navigation, backward navigation, or external links. Unlike the standard list item, it omits overline and extra label to maintain a smaller footprint while remaining interactive. These items are designed to be stacked within a list, with no spacing between the elements.

Parameters

label

The main label of the small list item.

modifier

Modifier applied to the layout of the small list item.

onClick

Callback invoked when the small list item is clicked.

indicator

The navigation indicator to display. Defaults to OudsListItemDefaults.Indicator (Next).

contentAlignment

Controls the vertical alignment of the content. Defaults to OudsListItemDefaults.ContentAlignment.

description

Optional text displayed below the label.

leading

Optional leading content such as an icon or image displayed at the start of the small list item.

trailing

Optional trailing content such as an icon, image, or text displayed at the end of the small list item.

divider

Controls the display of a divider at the bottom of the small list item. Defaults to true.

background

Controls whether the small list item has a background color. Defaults to false.

helperText

Optional helper text displayed below the small list item.

boldLabel

Controls whether the label text is displayed in bold. Defaults to false.

enabled

Controls the enabled state of the small list item. When false, the item is not clickable and content is displayed in a disabled state. Defaults to true.

interactionSource

Optional hoisted MutableInteractionSource for observing and emitting interactions for this small list item.

Samples

Column {
    OudsSmallListItem(
        label = "Go back",
        onClick = { /* Navigate back */ },
        indicator = OudsListItemIndicator.Previous
    )
    OudsSmallListItem(
        label = "Continue",
        onClick = { /* Navigate forward */ },
        indicator = OudsListItemIndicator.Next
    )
    OudsSmallListItem(
        label = "View on web",
        onClick = { /* Open browser */ },
        indicator = OudsListItemIndicator.External
    )
}

OudsSmallListItem(
    label = "Main label",
    description = "This is a description that provides additional context.",
    leading = OudsSmallListItemLeading.Icon(
        imageVector = Icons.Outlined.Favorite,
        contentDescription = "Favorite icon"
    ),
    trailing = OudsSmallListItemTrailing.Text(label = "99+", style = OudsListItemTextStyle.Label),
    helperText = "Helper text appears below the item",
    boldLabel = true,
    background = true,
    divider = true
)

OudsSmallListItem(
    label = "Compact view",
    description = "Quick access to content",
    leading = OudsSmallListItemLeading.Image(
        painter = CheckerboardPainter,
        contentDescription = "Content image",
        ratio = OudsListItemImageRatio.Square
    ),
    trailing = OudsSmallListItemTrailing.Text(label = "New", style = OudsListItemTextStyle.LabelStrong)
)

OudsSmallListItem(
    label = "Premium features",
    description = "Unlock exclusive content",
    leading = OudsSmallListItemLeading.Icon(
        painter = rememberRainbowHeartPainter(),
        contentDescription = "Premium icon",
        tinted = false
    )
)

OudsSmallListItem

Parameters

See also

Samples

Parameters

See also

Samples