# Separator

A thin dividing line. Use it to visually separate sections of a page or items in a toolbar. Like a ruled line on a notepad, it gives your layout breathing room and clarity.

---

## Quick example

```csharp
new Separator()          // horizontal rule
new Separator(orientation: "vertical")  // vertical bar
```

---

## All the options

```csharp
public Separator(
    string orientation  = "horizontal",
    string extraClasses = "")
```

| Parameter | What it does |
|---|---|
| `orientation` | `"horizontal"` (default) renders an `<hr>`. `"vertical"` renders an inline bar. |
| `extraClasses` | Additional Tailwind classes to override spacing or colour. |

---

## Real-world examples

### Between sections on a settings page

```html
<h2 class="text-lg font-semibold">Account</h2>
<p class="text-sm text-muted-foreground">Manage your account details.</p>
$$Sep1$$
<h2 class="text-lg font-semibold">Notifications</h2>
```

```csharp
_sep1 = new Separator();
```

### Vertical bar in a text editor toolbar

```html
<div class="flex items-center gap-2">
  <button>Bold</button>
  $$Sep$$
  <button>Italic</button>
  $$Sep$$
  <button>Underline</button>
</div>
```

```csharp
_sep = new Separator(orientation: "vertical");
```

### More or less spacing

```csharp
new Separator(extraClasses: "my-8")    // extra breathing room above and below
new Separator(extraClasses: "my-2")    // tighter spacing
```

---

## How it works

A horizontal separator is an `<hr>` element with a top border. A vertical separator is an inline `<span>` with a left border and a fixed height of 16px. Both use `border-border` which follows the theme's CSS variable and adapts to dark mode automatically.

## Tips and tricks

- The horizontal `Separator` is an `<hr>` element — it carries semantic meaning as a thematic break. Use it between content sections.
- The vertical `Separator` is an inline `<span>` — use it inside `flex` rows (toolbars, breadcrumb rows, stat rows, etc.).
- Override margins using `extraClasses` when the default `my-4` / `mx-2` doesn't fit the surrounding layout.
- Override margins using `extraClasses` when the default `my-4` / `mx-2` doesn't fit the surrounding layout.

---

## Complete page example

**`Templates/AboutPage.htmx`**
```html
<div class="max-w-2xl mx-auto py-10">
  <h1 class="text-3xl font-bold mb-2">About BeepBoop</h1>
  <p class="text-muted-foreground mb-4">A fast AOT-safe HTMX framework for .NET 10.</p>
  $$SectionSep1$$
  <h2 class="text-xl font-semibold mb-2">Mission</h2>
  <p class="text-sm mb-4">$$MissionText$$</p>
  $$SectionSep2$$
  <h2 class="text-xl font-semibold mb-2">Team</h2>
  <div class="flex items-center gap-2 text-sm">
    <span>Alice</span>
    $$InlineSep$$
    <span>Bob</span>
    $$InlineSep$$
    <span>Carol</span>
  </div>
</div>
```

**`Templates/AboutPage.htmx.cs`**
```csharp
namespace Htmx.ApiDemo.Templates;

public sealed class AboutPage : AboutPageBase
{
    private readonly IHtmxComponent _sep1;
    private readonly IHtmxComponent _sep2;
    private readonly IHtmxComponent _inline;
    private readonly byte[] _mission;

    public AboutPage()
    {
        _sep1    = new Components.Separator();
        _sep2    = new Components.Separator();
        _inline  = new Components.Separator(orientation: "vertical");
        _mission = "BeepBoop makes building server-rendered HTMX apps as fast and safe as possible.".ToUtf8Bytes();
    }

    protected override void RenderSectionSep1(HtmxRenderContext ctx) => _sep1.Render(ctx.Next());
    protected override void RenderSectionSep2(HtmxRenderContext ctx) => _sep2.Render(ctx.Next());
    protected override void RenderInlineSep(HtmxRenderContext ctx)   => _inline.Render(ctx.Next());
    protected override void RenderMissionText(HtmxRenderContext ctx) => ctx.Writer.WriteUtf8(_mission);
}
```

**GET handler**
```csharp
[Handler]
[MapGet("/about")]
public static partial class GetAboutHandler
{
    public record Query();
    private static Task<IResult> HandleAsync(Query _, HttpContext ctx, CancellationToken ct)
        => ctx.WriteHtmxPage(new AboutPage(), title: "About");
}
```