RhombusKit

Divider

A divider is a thin rule that visually and semantically separates content. <rhombus-divider> is bespoke — a role="separator" element themed straight off the contract (--border, or --border-accent with the accent flag) — so it adds no new tokens and re-skins with the theme. It runs horizontal (default) or vertical, can be inset from the container edges, and can carry a short label to become a text divider (e.g. "OR").

Example

Account settings

Danger zone

When to use

  • To separate stacked sections, list rows, or menu groups (horizontal).
  • To split inline actions in a toolbar or button row (vertical, inside a flex container).
  • As a labelled "OR" break between two choices, such as separating sign-in methods.

When not to use

  • Where whitespace or a heading already implies the break — a divider adds visual noise without adding meaning.
  • To create spacing. Stacking dividers for gaps is a job for layout margins; reach for inset only when the rule itself should not run edge-to-edge.

Related components

  • Card — a bounded surface that groups content.
  • Accordion — collapsible sections instead of a static rule.

Was this page helpful?