PetalComponents.Separator (petal_components v4.16.0)

Copy Markdown View Source

A hairline divider for app UI, with an optional inline label.

<.separator />
<.separator label="OR" />
<.separator label="Today" label_position="start" />
<.separator orientation="vertical" class="h-6" />
<.separator decorative={false} />

Spacing

A separator carries no vertical margin. App layouts already control their own rhythm with gap and space utilities, and a component that quietly adds my-8 is a component you spend the afternoon overriding. Add the spacing you want at the call site.

Vertical

A vertical separator is a w-px rule that stretches to its flex parent (self-stretch). If the parent does not give it a height, set one yourself - and pair it with self-center: class="h-6 self-center". An explicit height defeats the stretch, and flexbox's fallback then parks the rule at the top of the row instead of the middle. Labelled vertical separators are deliberately not supported.

Decorative vs semantic

decorative defaults to true, matching Radix: most dividers are paint, and announcing them is noise. The element gets aria-hidden="true" and no role.

Set decorative={false} when the rule genuinely divides content that assistive tech should hear as separate, e.g. between groups in a menu. That renders role="separator", plus aria-orientation="vertical" when vertical (horizontal is the ARIA default, so it is left off).

PetalComponents.Typography.hr/1 is the prose rule. It renders a real <hr> with my-8 for article and long-form content, and it is not going anywhere. Reach for <.separator> in application chrome, where you want the hairline without the opinion about spacing, plus labels, vertical mode and the ARIA switch.

Summary

Functions

separator(assigns)

A hairline divider, optionally labelled.

Functions

separator(assigns)

A hairline divider, optionally labelled.

<.separator />
<.separator label="OR" />

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • orientation (:string) - vertical is a w-px rule that stretches to its flex parent. Defaults to "horizontal". Must be one of "horizontal", or "vertical".
  • label (:string) - optional inline label, e.g. "OR" or a date. Horizontal only. Defaults to nil.
  • label_position (:string) - where the label sits along the rule. Defaults to "center". Must be one of "start", "center", or "end".
  • decorative (:boolean) - true renders aria-hidden (purely visual); false renders role="separator" with aria-orientation for semantically meaningful dividers. Defaults to true.
  • Global attributes are accepted. any extra HTML attributes for the rendered div.

Slots

  • inner_block - rich label content; wins over the label attr.