Separator

Content divider in horizontal and vertical orientations, with an optional centered label.

Basic

.heex 
<.separator />

With text label

.heex 
<.separator text="or" />

Vertical

Profile Settings Sign out
.heex 
<div class="flex h-6 items-center gap-3 text-sm text-foreground-soft">
  <span>Profile</span>
  <.separator vertical />
  <span>Settings</span>
  <.separator vertical />
  <span>Sign out</span>
</div>

Custom styling

Pass utilities through class to change thickness, dash style, or color.

.heex 
<.separator class="border-dashed border-2" />
<.separator class="border-primary" />

Form sections

Profile

Account

.heex 
<.form for={@form} phx-submit="save" class="space-y-5">
  <div class="space-y-3">
    <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-3">
    <h3 class="font-medium">Account</h3>
    <.input field={@form[:password]} label="Password" type="password" />
  </div>
</.form>

Auth "or" divider

.heex 
<div class="space-y-4">
  <.button variant="outline" class="w-full">
    <.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]} type="email" placeholder="Email" />
    <.input field={@form[:password]} type="password" placeholder="Password" />
    <.button type="submit" class="w-full">Sign in</.button>
  </.form>
</div>

Card metadata strip

Add vertical to split inline metadata in a single row.

Phoenix LiveView in 2026

Ada Lovelace May 2, 2026 4 min read
.heex 
<article class="w-full max-w-sm rounded-lg border border-base p-4">
  <h2 class="text-base font-semibold">Phoenix LiveView in 2026</h2>

  <div class="mt-2 flex h-4 items-center gap-3 text-xs text-foreground-softer">
    <span>Ada Lovelace</span>
    <.separator vertical />
    <span>May 2, 2026</span>
    <.separator vertical />
    <span>4 min read</span>
  </div>
</article>