The first example of the Pattern page, live.

Overview

The <mds-separator> web component is the visual divider of the Magma Design System: a thin, full-radius horizontal rule used to partition content into distinct groups. It is a purely presentational primitive - the styled equivalent of an <hr> - with no props, slots, events, or interactive state.

Semantic Behavior

Presentational by default: It exposes no role or ARIA attributes and accepts no children, so it is treated as decorative chrome rather than semantic content.Theme-reactive coloring: The separator color adapts automatically to the active appearance - darker under dark themes and stronger under high-contrast preferences - with no consumer wiring required.No state or interaction: There is no disabled, await, focus, or keyboard behavior - the element is inert and never enters the tab sequence.

Properties & Visual Configurations

The component defines no configurable props. The only intended customization point is the CSS custom property --mds-separator-background (default rgb(var(--magma-border-default))) that overrides the divider color; set it to a semantic color role so the divider keeps following the mode and the contrast preference. For the semantic color roles the default value draws from, see agents/color.md.

Dependencies

Used by: mds-price-table-list