Divider

mat-divider for separating sections horizontally or vertically.

Basic Divider

mat-divider with inset option to create visual separation.

Section one — some content above the divider.

Section two — content between standard and inset dividers.

Section three — after the inset divider.

HTML

<p>Section one — some content above the divider.</p>
<mat-divider class="my-3"></mat-divider>
<p>Section two — content between standard and inset dividers.</p>
<mat-divider class="my-3" [inset]="true"></mat-divider>
<p>Section three — after the inset divider.</p>

Vertical Divider

mat-divider with [vertical]="true" separates items in a flex row.

HTML

<div class="flex items-center gap-3">
  <button mat-icon-button><mat-icon>favorite</mat-icon></button>
  <mat-divider [vertical]="true" class="h-6"></mat-divider>
  <button mat-icon-button><mat-icon>share</mat-icon></button>
  <mat-divider [vertical]="true" class="h-6"></mat-divider>
  <button mat-icon-button><mat-icon>delete</mat-icon></button>
</div>