Component reference

Divider

Material 3 Expressive Divider component for separating content with smooth entrance animations.

Material 3Web ComponentFramework agnostic

Full-Width

<m3-divider></m3-divider>

Inset

<m3-divider variant="inset"></m3-divider>

Middle

<m3-divider variant="middle"></m3-divider>

Vertical

Item A

Item B

Item C

<div style="display:flex; gap:16px; align-items:center;">
  <span>Item A</span>
  <m3-divider orientation="vertical" style="height:24px;"></m3-divider>
  <span>Item B</span>
</div>

Thickness

<m3-divider thickness="2"></m3-divider>
<m3-divider thickness="4"></m3-divider>

Pulsing (Loading State)

<m3-divider pulsing></m3-divider>