Divider

Visual separator between sections or inline clusters.

Set vertical=true for a vertical rule between items in a horizontal row. Optional children render a centered label on the line. The component sets role="separator" internally.

  • Separate form sections, settings groups, or toolbar clusters - Vertical dividers between inline actions in a Flex row
  • Default horizontal divider between stacked blocks.
  • Set vertical=true inside a horizontal flex row.
  • Pass optional children for a labeled divider ("OR", section title).
Horizontal between blocks

A horizontal rule separates stacked content blocks in forms and settings pages.

Above

Below

Vertical in Flex toolbar

Vertical separator between inline items in a horizontal flex row.

LeftRight
Theme stroke token

Divider lines use stroke tokens from the Orbital theme provider.

Labeled divider

Optional children render centered text on the separator line.

Toolbar cluster

Combine Flex, Button, and vertical Divider for compact toolbars.