Components

Separator

A line between sections of content or groups of items. It carries no margin — the page spaces it — and a vertical one is as tall as its row until a vertical margin shortens it.

Drawn and behaving as Flux UI's separator does, measured against its live docs.

Separator

SeparatorExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class SeparatorExample : Component
{
    protected override Component? Render() =>
        Ui.Separator;
}

Live result

With text

SeparatorTextExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class SeparatorTextExample : Component
{
    protected override Component? Render() =>
        Ui.Separator.Text("or");
}

Live result

Vertical

As tall as its row.

SeparatorVerticalExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class SeparatorVerticalExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex items-center justify-center gap-6")[
            Ui.Button.Ghost.Icon(Ui.IconName.Moon).AriaLabel("Switch to dark theme"),
            Ui.Separator.Vertical(),
            Ui.Button["Log in"]
        ];
}

Live result

Limited height

A vertical margin shortens it.

SeparatorLimitedExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class SeparatorLimitedExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex items-center justify-center gap-6")[
            Ui.Button.Ghost.Icon(Ui.IconName.Moon).AriaLabel("Switch to dark theme"),
            Ui.Separator.Vertical().Class("my-2"),
            Ui.Button["Log in"]
        ];
}

Live result

Subtle

A fainter line.

SeparatorSubtleExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class SeparatorSubtleExample : Component
{
    protected override Component? Render() =>
        Div.Class("flex items-center justify-center gap-6")[
            Ui.Button.Ghost.Icon(Ui.IconName.Moon).AriaLabel("Switch to dark theme"),
            Ui.Separator.Vertical().Subtle,
            Ui.Button["Log in"]
        ];
}

Live result

Reference

`Ui.Separator`

flux:separator

A line between sections, or between items in a row. It carries no margin.

Step	Takes	What it does
`.Vertical()`	`bool`	Runs down instead of across.
`.Orientation(…)`	`Ui.SeparatorOrientation` Horizontal Vertical Each is a step of its own too, unless an HTML tag has its name.	The other way to say Vertical, for a direction decided at run time.
`.Variant(…)`	`Ui.SeparatorVariant` Default Subtle Each is a step of its own too, unless an HTML tag has its name.	How strongly the line is drawn.
`.Text(…)`	`string`	A word in the middle of the line: "or".