# Separator

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

```slint
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

```slint
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`.

```slint
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.

```slint
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](/docs/components/group-box) 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](/docs/components/menu-panel) rather than by this component (ADR-0012). Reach for `Separator` when the line is the whole intent.