Skip to content
m3exp-web
System Light Dark

Containment

Divider

A thin line that groups content in lists and layouts.

Examples

Horizontal and vertical

A plain <hr>; the vertical one needs aria-orientation="vertical". There is no React component: the class is the API.

Above the line

Below the line

Left
Right
React HTML 
export default function Divider() {
  return (
    <div style={{ inlineSize: '100%' }}>
      <p>Above the line</p>
      <hr className="m3e-divider" />
      <p>Below the line</p>
      <div style={{ display: 'flex', gap: 'var(--m3e-sys-space-200)', alignItems: 'stretch' }}>
        <span>Left</span>
        <hr className="m3e-divider m3e-divider--vertical" aria-orientation="vertical" />
        <span>Right</span>
      </div>
    </div>
  );
}
 
<div style="inline-size: 100%">
  <p>Above the line</p>
  <hr class="m3e-divider" />
  <p>Below the line</p>
  <div style="display: flex; gap: var(--m3e-sys-space-200); align-items: stretch">
    <span>Left</span>
    <hr class="m3e-divider m3e-divider--vertical" aria-orientation="vertical" />
    <span>Right</span>
  </div>
</div>

Run the HTML version (CSS classes only).

API

CSS

divider.css

@import '@kyralabs/m3e-css/divider.css';

Divider: horizontal (default) and vertical (COMPONENT_SPEC §35). No JavaScript needed.

<hr class="m3e-divider" />
<hr class="m3e-divider m3e-divider--vertical" aria-orientation="vertical" />
2 custom properties it reads
Custom property Default
--m3e-comp-divider-color var(--m3e-sys-color-outline-variant)
--m3e-comp-divider-thickness 1px

Accessibility

<hr>/role="separator"; vertical adds aria-orientation="vertical".

Every interactive part has a target of at least 48 × 48 px, a visible focus ring for keyboard focus only, and works under forced-colors and prefers-reduced-motion.

Sources

Values come from androidx Compose Material3 1.5.0-beta01 at 19991f2c and from m3.material.io, as cited below from COMPONENT_SPEC §35 and the m3e-css sources.

DividerTokens.kt@19991f2c via DividerDefaults (Divider.kt L111–118): thickness 1dp, color outline-variant. HorizontalDivider fills the width, VerticalDivider the height (L49–89); no built-in insets (margins on the element).

divider.css sources

(compose/material3 @ 19991f2c):

  • DividerTokens: Thickness 1.0.dp, Color OutlineVariant (DividerDefaults, Divider.kt L111-118).
  • HorizontalDivider fills the width at the given thickness (Divider.kt L49-61); VerticalDivider fills the height (L77-89). Neither has insets: inset dividers come from the caller's modifier, here margin-inline / margin-block on the element.

The line is a border, not a background: forced-colors mode keeps borders (as CanvasText) but replaces backgrounds, so the divider stays visible. 1dp = 1 CSS px.