Toolbar
Beta

Divider

A flexible divider component for visually separating content with customizable orientation, styling, and optional labels.

Import

import {FktDividerComponent} from "frakton-ng/divider";

Default

Basic horizontal divider with default settings.

Horizontal sizes

Horizontal divider with a label in the center.

Thin
Section Break
Medium
Section Break
Thick
Section Break
@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Horizontal variants

Horizontal divider with a label in the center.

Solid
Section Break
Dashed
Section Break
Dotted
Section Break
@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Horizontal with label

Vertical divider with a label in the middle.

Thin
OR
Medium
OR
Thick
OR
@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Vertical sizes

Vertical divider for separating content horizontally.

Thin
Medium
Thick
@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Vertical variants

Vertical divider for separating content horizontally.

Solid
Dashed
Dotted
@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Vertical with label

Vertical divider with a label in the middle.

Thin
OR
Medium
OR
Thick
OR
@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}

Spacings

Horizontal divider with a label in the center.

XS
Section Break
SM
Section Break
MD
Section Break
LG
Section Break
XL
Section Break
@for (variant of variants; track variant.label) {
	{{ variant.label }}
	
}