# Divider

**When to use:** A rule that separates sections of content — horizontal by default, filling the width of its parent. Optionally label it with text (e.g. "OR", a date, a section name); the line splits around the text, leaving a gap for it. Set `orientation` to `Vertical` for a vertical line filling the height of its parent instead, e.g. as a separator between two buttons in a `ButtonGroup`.

**Keywords:** separator, hr, spacer

**Import:** `import { Divider, DividerTextPosition, DividerOrientation } from '@ahrowe/ui'`

**Text position:** `DividerTextPosition.Left` | `DividerTextPosition.Center` (default) | `DividerTextPosition.Right`

**Orientation:** `DividerOrientation.Horizontal` (default) | `DividerOrientation.Vertical`

```tsx
import { Divider, DividerTextPosition, DividerOrientation } from '@ahrowe/ui';

// Plain line
<Divider />

// Centered text (default)
<Divider text="OR" />

// Text near the left edge
<Divider text="Section title" textPosition={DividerTextPosition.Left} />

// Text near the right edge
<Divider text="March 2026" textPosition={DividerTextPosition.Right} />

// Vertical — fills the height of its (flex/grid) parent, e.g. between two buttons
<ButtonGroup>
  <Button>Save</Button>
  <Divider orientation={DividerOrientation.Vertical} />
  <Button>Save & new</Button>
</ButtonGroup>
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `text` | `ReactNode` | Text (or any node) rendered on the line. Omit for a plain full-width line |
| `textPosition` | `DividerTextPosition` | Where `text` sits along the line (default `Center`) |
| `orientation` | `DividerOrientation` | `Horizontal` (default, fills width) or `Vertical` (fills height) |
| `className` / `style` | | Root element |

**Vertical orientation:** stretches to fill the height of a flex or grid parent (`align-self: stretch`), the same way `Button`s in a `ButtonGroup` do. Outside a flex/grid context, give it an explicit height via `style`, since a vertical line has no natural height of its own the way a horizontal one has a natural width (`100%` of its block-level parent).

**Slots:** `root` `line` (the line segment(s) either side of `text`) `content` (the `text` wrapper)