Separator

Visual content divider — horizontal, vertical, or with a centered label.

InputTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Separator direction
labelstring''Optional centered label text

Import & Usage

typescript
import { Component } from '@angular/core';
import { NgOatSeparator } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatSeparator],
  template: `
    <p>Content above</p>
    <ng-oat-separator label="OR" />
    <p>Content below</p>

    <div style="display:flex; height:40px;">
      <span>Left</span>
      <ng-oat-separator orientation="vertical" />
      <span>Right</span>
    </div>
  `,
})
export class ExampleComponent {}

Horizontal

Content above

Content below

html
<p>Content above</p>
<ng-oat-separator />
<p>Content below</p>

With Label

Section A

OR

Section B

Continue with

More content

html
<ng-oat-separator label="OR" />
<ng-oat-separator label="Continue with" />

Vertical

LeftCenterRight
html
<div class="hstack" style="height: 40px;">
  <span>Left</span>
  <ng-oat-separator orientation="vertical" />
  <span>Center</span>
  <ng-oat-separator orientation="vertical" />
  <span>Right</span>
</div>