Separator

A hairline between sections — a line, and deliberately nothing more.

import { Separator } from "@glint/components/separator.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 360px;
                spacing: 12px;

                Text {
                    text: "Account profile";
                    color: Tokens.color-foreground;
                    font-size: Tokens.typography-body-size;
                    font-weight: Tokens.typography-weight-medium;
                }

                Separator { }

                Text {
                    text: "Manage your personal profile and display preferences.";
                    color: Tokens.color-muted-foreground;
                    font-size: Tokens.typography-body-sm-size;
                }
            }
        }
    }
}

Usage

import { Separator, SeparatorOrientation } from "@glint/components/separator.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component AppWindow inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        Separator {
            orientation: SeparatorOrientation.horizontal;
        }
    }
}

Separator renders a 1px hairline divider that automatically stretches along its layout’s long axis while pinning its thickness.

Examples

Orientations

Separators support horizontal and vertical orientations via orientation: SeparatorOrientation.horizontal and orientation: SeparatorOrientation.vertical.

import { Separator, SeparatorOrientation } from "@glint/components/separator.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        spacing: 20px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 16px;

            Text {
                text: "Docs";
                color: Tokens.color-foreground;
                font-size: Tokens.typography-body-sm-size;
            }

            Separator {
                orientation: SeparatorOrientation.vertical;
                height: 16px;
            }

            Text {
                text: "Components";
                color: Tokens.color-foreground;
                font-size: Tokens.typography-body-sm-size;
            }

            Separator {
                orientation: SeparatorOrientation.vertical;
                height: 16px;
            }

            Text {
                text: "Examples";
                color: Tokens.color-foreground;
                font-size: Tokens.typography-body-sm-size;
            }
        }

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 320px;

                Separator {
                    orientation: SeparatorOrientation.horizontal;
                }
            }
        }
    }
}

Captioned separator

Provide text to turn the separator into a captioned divider with centered label text.

import { Separator } from "@glint/components/separator.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 360px;

                Separator {
                    text: "Or continue with";
                }
            }
        }
    }
}

API Reference

Properties

Property	Type	Default	Description
`orientation`	`in SeparatorOrientation`	`SeparatorOrientation.horizontal`	`horizontal` (default) or `vertical`. Ignored while there is a caption, which is horizontal by construction.
`text`	`in string`	no default	Caption centred in the rule; empty (the default) is the bare hairline.

Enums

Enum	Values
`SeparatorOrientation`	`horizontal`, `vertical`

Accessibility

Decorative by construction. Separator is a hairline Rectangle with no accessible-role, no label and no focus behaviour, so it never appears in the accessibility tree and the keyboard passes over it. A rule that a reader cannot see is not a rule they are missing: what separates the sections for them is the sections’ own names.
Grouping is a role, not a line. Where the split is structural — a form broken into parts, a menu into runs — the grouping has to be carried by something that announces it: GroupBox for a titled frame, a named region for a pane, or a menu separator, which belongs to the row under it and is drawn by MenuPanel rather than by this component (ADR-0012). Reach for Separator when the line is the whole intent.