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.

Code
<p>Section one — some content above the divider.</p>
<mat-divider class="rui-my-3"></mat-divider>
<p>Section two — content between standard and inset dividers.</p>
<mat-divider class="rui-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.

Code
<div style="display:flex;align-items:center;gap:0.75rem;">
  <button mat-icon-button><mat-icon>favorite</mat-icon></button>
  <mat-divider [vertical]="true" class="rui-h-6"></mat-divider>
  <button mat-icon-button><mat-icon>share</mat-icon></button>
  <mat-divider [vertical]="true" class="rui-h-6"></mat-divider>
  <button mat-icon-button><mat-icon>delete</mat-icon></button>
</div>