ISeparator ​

A rule between groups of content, horizontal or vertical, with an optional label sitting in the line.

<p>Invoice details</p>
<ISeparator class="my-4" />
<p>Payment terms</p>

With a label ​

The label sits in the rule rather than above it.

<ISeparator label="or" />
<ISeparator label="Payment terms" />

Vertical ​

A vertical separator takes its height from its container, so give the container one.

<div class="flex h-6 items-center gap-3">
  <span>Draft</span>
  <ISeparator orientation="vertical" />
  <span>Sent</span>
</div>

Decorative or semantic ​

Separators are decorative by default and hidden from assistive technology. Set :decorative="false" when the rule marks a boundary a screen reader should hear about.

<ISeparator :decorative="false" />

Props ​

ITable and ICard draw their own rules, so a separator on top of one gives you two lines.