Primitives

Separator

A static, optionally semantic divider between groups of content or controls, horizontal or vertical.

forty-cdk/separator

A styleless role="separator" that reflects data-orientation, so one rule draws the horizontal and the vertical divider the same way.

Source

Account

Workspace

EditShareDelete

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ForSeparator } from 'forty-cdk/separator';

@Component({
  selector: 'app-separator-default-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForSeparator],
  template: `
    <div class="card">
      <span class="label">Account</span>
      <hr forSeparator class="separator-h" />
      <span class="label">Workspace</span>
      <hr forSeparator class="separator-h" />
      <div class="inline">
        <span>Edit</span>
        <span forSeparator decorative orientation="vertical" class="separator-v"></span>
        <span>Share</span>
        <span forSeparator decorative orientation="vertical" class="separator-v"></span>
        <span>Delete</span>
      </div>
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .card {
      width: min(560px, 100%);
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      padding: 1rem 1.1rem;
      background: var(--ex-surface, #ffffff);
      border: 1px solid var(--ex-border, #e5e0d6);
      border-radius: var(--ex-radius, 22px);
      corner-shape: squircle;
    }

    .label {
      font-weight: 600;
    }

    .separator-h {
      width: 100%;
      height: 1px;
      margin: 0;
      border: 0;
      background: var(--ex-border, #e5e0d6);
    }

    .inline {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: var(--ex-muted, #585d66);
    }

    .separator-v {
      width: 1px;
      height: 16px;
      background: var(--ex-border-strong, #d0c9bc);
    }
  `,
})
export class SeparatorDefaultExample {}

The focusable divider that resizes two panes is a separate primitive: ForPaneResizer. Keeping them apart means a plain <hr forSeparator> never pulls the drag / keyboard-resize code in.

Anatomy

<hr forSeparator class="separator" />

<span forSeparator class="separator" orientation="vertical" decorative></span>

Examples

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ForSeparator } from 'forty-cdk/separator';

@Component({
  selector: 'app-separator-default-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForSeparator],
  template: `
    <div class="card">
      <span class="label">Account</span>
      <hr forSeparator class="separator-h" />
      <span class="label">Workspace</span>
      <hr forSeparator class="separator-h" />
      <div class="inline">
        <span>Edit</span>
        <span forSeparator decorative orientation="vertical" class="separator-v"></span>
        <span>Share</span>
        <span forSeparator decorative orientation="vertical" class="separator-v"></span>
        <span>Delete</span>
      </div>
    </div>
  `,
})
export class SeparatorDefaultExample {}

API

`ForSeparator`

Property	Type	Description
`orientation`	`input`	Axis the separator divides along. Default: `'horizontal'`
`decorative`	`input`	When true, the separator is purely visual (`role="none"`). Default: —

Data attribute	Values
`data-orientation`	`horizontal` \| `vertical`

Accessibility

Implements the static WAI-ARIA Separator pattern.

Static is the only mode. [forSeparator] keeps role="separator" and (for vertical) aria-orientation="vertical". Horizontal omits the attribute because it is the ARIA default.
Use decorative when redundant. If the section split is already announced (e.g. headings on either side), set decorative so the separator becomes role="none" and AT skips it.
One emission policy across every separator in the library. [forSeparator], [forToolbarSeparator], [forMenuSeparator], [forSelectSeparator], and [forComboboxSeparator] all share the same contract: role="separator" (or role="none" with decorative), aria-orientation emitted only for orientation="vertical", and data-orientation always stamped for styling. [forToolbarSeparator] is the one variation: its orientation defaults to the toolbar's cross-axis instead of horizontal.
Need a resizer? Reach for ForPaneResizer, the focusable, draggable, value-carrying divider between two panes.

Styling

forty-cdk ships no styles: put your own class on each piece and key your CSS off the data-* attributes listed under API, not off the for* selectors (Styling forty-cdk explains why).

.separator {
  background: var(--border);
}

.separator[data-orientation='horizontal'] {
  block-size: 1px;
  inline-size: 100%;
}

.separator[data-orientation='vertical'] {
  inline-size: 1px;
  align-self: stretch;
}