PhiaUi.Components.Layout.Divider (phia_ui v0.1.17)

Copy Markdown View Source

Enhanced separator with optional centered text label.

Extends the basic separator with a text label variant useful for grouping sections (e.g., "Or continue with" in authentication flows).

Without a label, behaves identically to separator. With a label, renders a flex row with expanding lines on either side of the label text.

Examples

<%!-- Plain horizontal divider --%>
<.divider />

<%!-- Labeled divider (auth separator) --%>
<.divider label="Or continue with" />

<%!-- Label aligned to start --%>
<.divider label="Filters" label_position={:start} />

<%!-- Vertical divider --%>
<.divider orientation="vertical" class="h-8" />

Summary

Functions

divider(assigns)

Renders a divider, optionally with a centered label.

Functions

divider(assigns)

Renders a divider, optionally with a centered label.

Attributes

  • orientation (:string) - Separator orientation. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • label (:string) - Optional label text (horizontal only). Defaults to nil.
  • label_position (:atom) - Where to position the label. Defaults to :center. Must be one of :start, :center, or :end.
  • class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root element.