Fluxon.Components.Separator (Fluxon v3.1.1)

A pure-markup divider for splitting content into visually distinct sections.

Separator renders a horizontal rule, a vertical rule, or a horizontal rule with a centered text label, depending on which attributes are set. The component has no client-side behavior and draws its line from your design system's border and foreground tokens, so it adapts automatically to light and dark modes.

Choosing between separator and layout spacing

Reach for separator/1 when you want a visible line that signals a semantic boundary between content groups (form sections, sidebar groups, OR-style choice rows). For breathing room between unrelated blocks that do not need a visible divider, prefer spacing utilities (space-y-*, gap-*, mt-*) on the parent container.

Usage

Render a horizontal divider between two stacked blocks:

<div class="py-2">Content above</div>
<.separator />
<div class="py-2">Content below</div>

The default rendering is a thin horizontal rule that takes the full width of its parent. No margin is applied by default, so wrap the separator in a parent that already provides vertical rhythm (for example space-y-*) or pass spacing utilities through class.

Orientation

The vertical attribute switches the separator from a horizontal rule to a vertical one. A vertical separator stretches to the full height of its flex parent, so it fills the row without an explicit height:

<div class="flex h-8 items-center gap-4">
  <span>Left</span>
  <.separator vertical />
  <span>Right</span>
</div>

Use a vertical separator inside flex rows to divide inline groups (toolbars, breadcrumbs, metadata strips). Use the default horizontal orientation between stacked blocks.

Orientation and text are exclusive

The vertical attribute and the text attribute cannot be combined. If both are set, the vertical orientation wins and the text is ignored. Render text labels only on horizontal separators.

Text Labels

Pass text to render a horizontal separator with a centered label and lines on either side. This pattern is useful for "or" dividers between alternative actions and for soft section markers inside a list:

<.separator text="or" />

The label renders in a muted foreground color at a small text size so it reads as a divider caption rather than a heading.

Spacing and Customization

The component does not impose vertical margin so it can be composed cleanly with any parent layout system. Pass spacing utilities through class when the separator stands alone:

<!-- Custom vertical spacing around a horizontal separator -->
<.separator class="my-8" />

<!-- Vertical separator with horizontal margin and an explicit height override -->
<.separator vertical class="mx-4 h-full" />

<!-- Labelled separator with extra vertical spacing -->
<.separator text="Section" class="my-6" />

Custom classes are merged with the component's base styles, so later utilities override earlier ones cleanly.

Examples

Group form fields into labelled sections:

<.form for={@form} phx-submit="save" class="space-y-4">
  <div class="space-y-2">
    <h3 class="font-medium">Profile</h3>
    <.input field={@form[:name]} label="Name" />
    <.input field={@form[:email]} label="Email" type="email" />
  </div>

  <.separator />

  <div class="space-y-2">
    <h3 class="font-medium">Account</h3>
    <.input field={@form[:password]} label="Password" type="password" />
    <.switch field={@form[:two_factor]} label="Enable two-factor auth" />
  </div>

  <.separator />

  <div class="space-y-2">
    <h3 class="font-medium">Privacy</h3>
    <.checkbox field={@form[:newsletter]} label="Subscribe to newsletter" />
  </div>
</.form>

An "or" divider between two alternative authentication methods:

<div class="space-y-4">
  <.button variant="solid" color="primary" class="w-full" phx-click="sign_in_with_google">
    <.icon name="hero-globe-alt" class="size-4" /> Continue with Google
  </.button>

  <.separator text="or" />

  <.form for={@form} phx-submit="sign_in" class="space-y-3">
    <.input field={@form[:email]} label="Email" type="email" />
    <.input field={@form[:password]} label="Password" type="password" />
    <.button type="submit" class="w-full">Sign in</.button>
  </.form>
</div>

Vertical separators inside an inline action bar:

<div class="flex h-6 items-center gap-3 text-sm text-foreground-soft">
  <.link navigate={~p"/profile"}>Profile</.link>
  <.separator vertical />
  <.link navigate={~p"/settings"}>Settings</.link>
  <.separator vertical />
  <.link href={~p"/sign-out"} method="delete">Sign out</.link>
</div>

Labelled section markers inside a chronological feed:

<div class="space-y-6">
  <.separator text="Today" />
  <div :for={item <- @today_items}>{item.title}</div>

  <.separator text="Yesterday" />
  <div :for={item <- @yesterday_items}>{item.title}</div>

  <.separator text="Earlier this week" />
  <div :for={item <- @older_items}>{item.title}</div>
</div>

Card metadata strip with vertical separators:

<article class="rounded-lg border border-base p-4">
  <h2 class="text-lg font-semibold">{@post.title}</h2>

  <div class="mt-2 flex h-4 items-center gap-3 text-xs text-foreground-softer">
    <span>{@post.author}</span>
    <.separator vertical />
    <span>{Calendar.strftime(@post.published_at, "%b %d, %Y")}</span>
    <.separator vertical />
    <span>{@post.reading_time} min read</span>
  </div>
</article>

Summary

Components

separator(assigns)

Renders a horizontal rule, a vertical rule, or a labelled horizontal rule.

Components

separator(assigns)

Renders a horizontal rule, a vertical rule, or a labelled horizontal rule.

Use this component to mark a semantic boundary between sections of content with a visible divider. By default the separator renders as a thin horizontal line spanning the full width of its parent. Set vertical to render a vertical line that stretches to the full height of a flex row, or set text to render a horizontal line with a centered caption.

The component renders a single <div> and applies no margin of its own, so it composes cleanly with any parent spacing system. Pass utilities through class when extra spacing or sizing is needed.

Attributes

  • text (:string) - Optional caption rendered in the center of the separator with a thin line on each side. Useful for "or" dividers and soft section markers inside a list. Ignored when vertical is set, since text labels are only supported on horizontal separators.

    Defaults to nil.

  • vertical (:boolean) - When true, renders a vertical line that stretches to the full height of its flex parent. Use inside flex rows to divide inline groups such as toolbars, breadcrumbs, or metadata strips. Cannot be combined with text.

    Defaults to false.

  • class (:any) - Additional CSS classes merged with the separator's base border and color styles. Use this to add margin (my-*, mx-*) for standalone separators, to override the height of a vertical separator, or to swap the border color for a custom token.

    Defaults to nil.