Divider

import { VerticalDivider, HorizontalDivider, TextButton } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;

    VerticalLayout {
        spacing: 8px;
        TextButton { text: "Section 1"; }
        HorizontalDivider {}
        TextButton { text: "Section 2"; }
        HorizontalDivider {}
        TextButton { text: "Section 3"; }
    }
}

A Divider is a thin line that groups content in lists and layouts. It provides visual separation between different sections or items in your interface.

A horizontal line divider that spans the full width of its container. Perfect for separating content vertically in lists, forms, and other layouts.

A vertical line divider that spans the full height of its container. Ideal for separating content horizontally in side-by-side layouts or navigation components.

Dividers are commonly used to:

• Separate sections in lists and forms
• Group related content in navigation components
• Provide visual hierarchy in complex layouts
• Create clear boundaries between different interface areas

The color of the divider is set via the “MaterialPalette.outline_variant” color.