PhiaUi.Components.Separator (phia_ui v0.1.17)

Thin divider line for separating content regions.

Renders a horizontal or vertical separator using bg-border — the semantic Tailwind token that adapts to light and dark mode automatically. Zero JavaScript — purely CSS.

Decorative vs structural separators

The :decorative attribute controls ARIA semantics:

`decorative`	`role`	Screen reader behaviour
`true` (default)	`"none"`	Hidden from assistive technologies
`false`	`"separator"`	Announced as a structural boundary + orientation

Use decorative: false when the separator meaningfully divides distinct content regions (e.g. between a nav and main content area). Use the default decorative: true for purely visual spacing.

Horizontal separator (default)

The standard use case — divides stacked content sections:

<.separator />

<%!-- With vertical breathing room --%>
<.separator class="my-4" />

Vertical separator

Must be inside a flex container with a defined height to be visible:

<div class="flex h-8 items-center gap-4">
  <span>Cut</span>
  <.separator orientation="vertical" />
  <span>Copy</span>
  <.separator orientation="vertical" />
  <span>Paste</span>
</div>

In a card header

<.card>
  <.card_header>
    <.card_title>Account Settings</.card_title>
  </.card_header>
  <.separator />
  <.card_content>
    ...
  </.card_content>
</.card>

Structural separator (accessible)

When the separator represents a meaningful boundary between landmark regions, disable decorative mode so screen readers announce it:

<.separator decorative={false} />

In a command/shortcut list

<.separator class="my-1" />

Summary

Functions

separator(assigns)

Renders a visual or structural separator line.

Functions

separator(assigns)

Renders a visual or structural separator line.

The separator is a single-pixel <div> coloured with the bg-border semantic token. On horizontal orientation it spans full width (w-full). On vertical orientation it spans full height (h-full), requiring the parent to have a fixed or flex-constrained height.

Attributes

orientation (:string) - Direction of the separator: "horizontal" (default, full width, 1px tall) or "vertical" (full height, 1px wide). Vertical separators must be inside a flex container with a defined height. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
decorative (:boolean) - Controls ARIA visibility.
- true (default): purely visual (role="none", hidden from screen readers).
- false: structural boundary (role="separator" with aria-orientation).
Defaults to true.
class (:string) - Additional CSS classes. Use my-N for horizontal spacing, or pass custom width/height overrides. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root element.