Skip to main content

Component | Divider

Visually separate content with a horizontal or vertical line. Dividers are useful for creating logical groupings and improving the scannability of your UI.

ui.stack([
  ui.statistic("Active Users", 1250),
  ui.divider(),
  ui.statistic("Sign Ups", 320),
  ui.divider(),
  ui.statistic("Churned Users", 12)
])

API reference​

Function signature​

ui.divider(
    options?: Partial<{
        orientation: "horizontal" | "vertical",
        thickness: "thin" | "medium" | "thick",
        style: Style
    }>
)

Parameters​

properties.orientation

optional string literal

The orientation of the divider. Defaults to "horizontal".

Options:

  • "horizontal": A horizontal line.
  • "vertical": A vertical line. Useful when using the divider is inside a row component.

properties.thickness

optional string literal

The thickness of the divider line. Defaults to "thin".

Options:

  • "thin": 1px
  • "medium": 2px
  • "thick": 4px

properties.style

optional Style

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.