Divider

A divider creates separation of content.

AndroidreleasediOSreleased

Native only

For the web implementation of a "divider", see CSS - Border - Divide.

Usage

A subtle line used to separate content horizontally, or vertically, into sections, making page content more comprehensive.

Design Guidelines

See Figma: Warp - Components / Divider

Framework(s)

Syntax

@Composable
fun WarpDivider(
    modifier: Modifier = Modifier,
    orientation: Orientation = Orientation.Horizontal,
    dashed: Boolean = false
)

Visual options

Warp supports horizontal and vertical dividers. The divider can also be either solid or dashed.

WarpDivider() // Basic usage, will fill width of parent
WarpDivider(
    modifier = Modifier.padding(dimensions.space2),
    orientation = Orientation.Vertical,
    dashed = true
)

Legacy support

Not supported

Parameters

Optional Props

name	type	default	notes
modifier	Modifier	Modifier	Modifier for the divider
orientation	Orientation.Horizontal Orientation.Vertical	Orientation.Horizontal	Orientation of the divider
dashed	Boolean	false	Style of the divider, solid if false

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system