Concorde UI component — Divider. sonic-divider draws a horizontal or vertical rule with optional centered label copy. Use it to separate sections in forms, cards, and sonic-menu. Set label for simple HTML captions or use the default Doc ID: core/components/ui/divider/divider. Keywords: Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component, sonic-menu, label, align, center, lineStyle, solid, size, 0.5rem. URL: https://concorde.supersoniks.org/core/components/ui/divider.

Divider

sonic-divider draws a horizontal or vertical rule with optional centered label copy. Use it to separate sections in forms, cards, and sonic-menu. Set label for simple HTML captions or use the default slot for richer markup; default align is center and default lineStyle is solid.

Basic example

A bare divider is a full-width line with vertical margin. Omit size to use the host default spacing (0.5rem block margin).

<sonic-divider></sonic-divider>

Label and align

label renders inside the line (as HTML). align controls which side(s) of the line remain visible: left drops the leading segment, right drops the trailing segment, center keeps both.

<div class="grid gap-4">
      <sonic-divider label="Default centered label"></sonic-divider>
      <sonic-divider label="Left" align="left"></sonic-divider>
      <sonic-divider label="Center" align="center"></sonic-divider>
      <sonic-divider label="Right" align="right"></sonic-divider>
    </div>

Size

size adjusts block margin and label font size. Values follow the shared Concorde scale (2xs … 2xl).

<div class="grid gap-4">
      <sonic-divider size="2xs" label="2xs"></sonic-divider>
      <sonic-divider size="xs" label="xs"></sonic-divider>
      <sonic-divider size="sm" label="sm"></sonic-divider>
      <sonic-divider size="md" label="md"></sonic-divider>
      <sonic-divider size="lg" label="lg"></sonic-divider>
      <sonic-divider size="xl" label="xl"></sonic-divider>
      <sonic-divider size="2xl" label="2xl"></sonic-divider>
    </div>

Line style

lineStyle sets the stroke of the rule (solid · dashed · dotted). In HTML use the reflected attribute linestyle (case-insensitive).

<div class="grid gap-4">
      <sonic-divider label="Solid"></sonic-divider>
      <sonic-divider label="Dashed" lineStyle="dashed"></sonic-divider>
      <sonic-divider label="Dotted" lineStyle="dotted"></sonic-divider>
    </div>

Vertical and margin

Set vertical for a column rule (for example between toolbar actions). noMargin removes host margin when a parent layout already provides spacing.

<div class="flex items-stretch gap-2" style="min-height: 3rem;">
      <span class="flex items-center px-2">Before</span>
      <sonic-divider vertical noMargin></sonic-divider>
      <span class="flex items-center px-2">After</span>
    </div>

Default slot

Slotted content replaces or augments label. Useful for badges, icons, or mixed markup in menus.

<sonic-divider>
      <span class="mr-2">Departures</span>
      <sonic-badge type="danger">+25</sonic-badge>
    </sonic-divider>

Inside typed cards

On sonic-card with semantic type (primary · warning · danger · info · success), the rule uses the card’s text color at reduced opacity so it stays visible on tinted surfaces. label and slotted captions use the same foreground color as surrounding copy.

<div class="grid gap-4 max-w-xl">
      <sonic-card type="danger">
        <div>CN 001 is cancelled.</div>
        <sonic-divider label="Affected passengers"></sonic-divider>
        <ul class="m-0 pl-5 text-sm">
          <li>Ada Lindqvist</li>
          <li>Captain Leo Marchand</li>
        </ul>
      </sonic-card>
      <sonic-card type="info">
        <div>Aircraft maintenance is scheduled for tonight.</div>
        <sonic-divider></sonic-divider>
        <div class="opacity-60">Expected downtime: about 15 minutes.</div>
      </sonic-card>
    </div>

API reference