# 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-code>
  <template>
    <sonic-divider></sonic-divider>
  </template>
</sonic-code>

## 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.

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Size

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

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Line style

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

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## 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.

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Default slot

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

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

## 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.

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `label` | string (HTML) | Caption centered on the rule; combined with default-slot content when both are set |
| `align` | `left` · `center` · `right` (default `center`) | Hides the leading or trailing line segment for left/right alignment |
| `size` | `2xs` … `2xl` · `inherit` | Vertical margin and label `font-size`; omit for host defaults |
| `lineStyle` | `solid` · `dashed` · `dotted` (default `solid`) | Stroke style of the rule (HTML attribute `linestyle`) |
| `vertical` | boolean | Renders a vertical rule; swap block/inline margins |
| `noMargin` | boolean | Sets host margin to `0` |

| Slot | Description |
|------|-------------|
| *(default)* | Label markup when **`label`** is insufficient or empty |