OudsVerticalDivider

Divider is a UI element that allows to structure the content by visually separating the content zones. Divider improves readability and content organization without introducing a stronger visual hierarchy like a heading or a container would.

The vertical divider renders a vertical line to separate horizontally aligned elements.

The color of the divider can be specified using the OudsDividerColor enum, and the thickness is defined by the current theme's divider border width. Note that a divider border width token set to 0 dp will produce a single pixel divider regardless of screen density.

Design

Parameters

Samples

Row(modifier = Modifier.padding(OudsTheme.spaces.fixed.small)) {
    Text(
        modifier = Modifier.weight(1f),
        text = "Start",
        color = OudsTheme.colorScheme.content.default
    )
    OudsVerticalDivider(modifier = Modifier.height(50.dp))
    Text(
        modifier = Modifier.weight(1f),
        text = "End",
        color = OudsTheme.colorScheme.content.default
    )
}