Mishka
Chelekom

Separator

v0.0.10

v0.0.10StableHeadlessStatelessAccessibleApache-2.0
Installation mix mishka.ui.gen.headless separator
Source View Source

Overview of the Phoenix and LiveView Headless Separator Component

The Mishka Chelekom Headless Separator ships zero opinionated styling - only the semantic markup and the correct ARIA wiring. It renders a single div with role="separator" (or role="none" when purely decorative) and an aria-orientation attribute, plus a data-orientation attribute for styling. Pass an inner block to render an optional centered label. Style it entirely with your own Tailwind classes: class on the root and label_class on the label.

Base UI Separator example (Phoenix headless)

Base UI Separator example (Phoenix headless)

Home Pricing Blog Support Log in Sign up
heex
<div class="flex gap-4 text-nowrap">
  <a href="/" class="text-sm text-neutral-950 dark:text-white">Home</a>
  <a href="/chelekom" class="text-sm text-neutral-950 dark:text-white">Pricing</a>
  <a href="/blog" class="text-sm text-neutral-950 dark:text-white">Blog</a>
  <a href="/chelekom/docs" class="text-sm text-neutral-950 dark:text-white">Support</a>

  <.separator
    id="baseui-separator-hero"
    orientation="vertical"
    class="w-px bg-neutral-300 dark:bg-neutral-700"
  />

  <a href="/auth" class="text-sm text-neutral-950 dark:text-white">Log in</a>
  <a href="/auth" class="text-sm text-neutral-950 dark:text-white">Sign up</a>
</div>

Separator example - with a label (Phoenix headless)

Text inside the separator becomes a span with data-part="label", drawn inside the root. The root here is a flex row, and its before: and after: pseudo-elements draw the two lines on either side, so the label sits in the middle. label_class styles the text.

Separator example - with a label (Phoenix headless)

heex
<.separator
  id="separator-label"
  class="flex w-72 max-w-full items-center gap-3 before:h-px before:flex-1 before:bg-neutral-300 after:h-px after:flex-1 after:bg-neutral-300 dark:before:bg-neutral-700 dark:after:bg-neutral-700"
  label_class="text-xs font-medium tracking-wide text-neutral-500 uppercase dark:text-neutral-400"
>
  or continue with
</.separator>

Parts & data attributes

The root carries a stable chelekom-separator class you can target, plus the current orientation as a data attribute. The label carries chelekom-separator__label.

Partdata-partState / ARIAPurpose
Root-role="separator", aria-orientation, data-orientationThe divider element itself; takes class.
Labellabel-Optional centered label rendered from the inner block; takes label_class.

Accessibility

Follows the WAI-ARIA Separator role: the root exposes role="separator" with an aria-orientation matching the visual axis. Set decorative to switch to role="none" for purely visual dividers that should be hidden from assistive technology.