Separator

Class: FxSeparator · Tag: <fx-separator>

The <fx-separator> component is a visual divider line designed for HMI panels and dashboards. It supports horizontal and vertical orientations, thin or thick profiles, an optional edge fade-out mode (smooth), and built-in padding.

---

Installation

import '@salsafx/ui';

---

Basic Usage

Thin (default)

A single highlight line between stacked content. Spacing is controlled by the padding property.

Generator Output: 4.5 MWRotor Speed: 82 RPM

<span>Generator Output: 4.5 MW</span>
<fx-separator thickness="thin" padding="medium"></fx-separator>
<span>Rotor Speed: 82 RPM</span>

Thick

A shadow and highlight pair that creates a deeper recessed groove.

Section ASection B

<fx-separator thickness="thick" padding="medium"></fx-separator>

Smooth

Applies a gradient mask that fades out the separator line at its ends.

Upper SectionLower Section

<fx-separator mode="smooth" thickness="thin" padding="medium"></fx-separator>

Vertical

A vertical separator placed inside a horizontal layout container with align-items: stretch to fill the available height.

LeftRight

<div style="display: flex; align-items: stretch; height: 120px;">
    <span>Left</span>
    <fx-separator orientation="vertical" thickness="thin" padding="medium"></fx-separator>
    <span>Right</span>
</div>

Padding

The padding property adds spacing along the cross-axis of the separator, allowing layout spacing without requiring a parent container gap.

noneAB

smallAB

mediumAB

largeAB

x-largeAB

<fx-separator padding="none"></fx-separator>
<fx-separator padding="small"></fx-separator>
<fx-separator padding="medium"></fx-separator>
<fx-separator padding="large"></fx-separator>
<fx-separator padding="x-large"></fx-separator>

---

API Reference

Properties & Attributes

Property	Attribute	Type	Default	Description
orientation	orientation	"horizontal" | "vertical"	"horizontal"	Orientation of the separator (“horizontal” or “vertical”).
thickness	thickness	"thin" | "thick"	"thin"	Profile thickness (“thin” or “thick”).
mode	mode	"normal" | "smooth"	"normal"	Blending mode (“normal” or “smooth” with faded edges).
padding	padding	"none" | "small" | "medium" | "large" | "x-large"	"none"	Cross-axis padding spacing around the separator line.

Slots

This component has no slots.

CSS Custom Properties

Property	Default	Description
--fx-separator-bleed	0.63rem	Extra length past the parent edge when mode="smooth".

---

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxSeparator

    FxElement <|-- FxSeparator

See also Architecture.