Separator

A visual or semantic divider.

ng-blatui

An accessible Angular UI library.

DocsSourceAPI

import { BuiSeparator } from 'ng-blatui';

<div buiSeparator class="my-4"></div>
<span buiSeparator orientation="vertical" [decorative]="false" class="h-4"></span>

List

Profile

Billing

Settings

<div class="rounded-lg border">
  <div class="px-4 py-3">Profile</div>
  <div buiSeparator></div>
  <div class="px-4 py-3">Billing</div>
</div>

With label

<div class="relative">
  <div buiSeparator></div>
  <span class="bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-2 text-xs uppercase">Or</span>
</div>

API reference

Inputs

Prop	Type	Default	Description
`orientation`	`SeparatorOrientation`	`'horizontal'`	Axis the separator runs along, also driving its sizing.
`decorative`	`boolean`	`true`	Whether the separator is purely visual; `false` exposes a semantic `role="separator"`.

Types

SeparatorOrientation — Axis the separator runs along.

"horizontal" | "vertical"

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.