# Divider

> A separator between content, horizontal or vertical.

URL: https://apogee.avaui.dev/docs/divider
Last updated: 2026-10-15

A separator between content, horizontal or vertical.

Last updated October 15, 2026

```astro
<p>Section one</p>
<Divider />
<p>Section two</p>
```

## Add

```sh
npx @ava-ui/apogee add divider
```

No Apogee dependencies.

## Usage

```astro
---
import Divider from '@/components/apogee/Divider/Divider.astro'
---
<Divider />
```

## API

`@composable` — exposed to Content Editors in AVA. Any other attribute passes through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | `horizontal` renders an `<hr>` (a `<div role="separator">` when labelled); `vertical` renders a `<div>` sized to stretch its flex/grid container. |
| `color` | `'neutral' \| 'neutral-faded'` | `'neutral'` | Line colour. |
| `contentPosition` | `'start' \| 'center' \| 'end'` | `'center'` | Where a label sits on a horizontal `line` divider. |
| `variant` | `'line' \| 'dual' \| 'fill'` | `'line'` | How labelled content is framed: between the halves of one rule, centred between two rules, or on a filled band. |
| `interactive` | `boolean` | `false` | The slot holds a button or group: drops the separator role and the faded text colour. |
| `inset` | `0 \| 2 \| 4 \| 6 \| 8` | — | Margin along the main axis. |
| `class` | `string` | — | Extra classes, merged last. |

## Variants

Every `orientation`:

```astro
<Divider orientation="horizontal" />
```

```astro
<div class="flex h-12 items-center gap-4">
<span>Left</span>
<Divider orientation="vertical" />
<span>Right</span>
</div>
```

### Labelled

Text in the default slot renders between the lines; `contentPosition` moves it. The line follows the text direction in RTL.

```astro
<Divider>or</Divider>
<Divider contentPosition="start">Today</Divider>
<Divider contentPosition="end" color="neutral-faded">End of list</Divider>
<Divider inset={6} />
```

Every `variant`, and a button as the content (`interactive`):

```astro
<Divider variant="line">Today</Divider>
<Divider variant="dual">Today</Divider>
<Divider variant="fill">Today</Divider>
<Divider interactive><Button size="small" variant="outline" color="neutral"><Plus slot="start" />Add step</Button></Divider>
```

A button group between two rules:

```astro
<Divider variant="dual" interactive>
<ButtonGroup>…</ButtonGroup>
</Divider>
```

## States

No interactive states — a static separator.

## Examples

Between toolbar items:

```astro
<div class="flex h-10 items-center gap-3">
  <Button variant="ghost" color="neutral" iconOnly aria-label="Bold">B</Button>
  <Divider orientation="vertical" />
  <Button variant="ghost" color="neutral" iconOnly aria-label="Italic">I</Button>
</div>
```

## Accessibility

-   `horizontal` is a real `<hr>` — implicit `separator` role, no extra ARIA needed.
-   `vertical` is a `<div role="separator" aria-orientation="vertical">`, since `<hr>` only carries horizontal semantics.
-   A labelled divider is a `<div role="separator">` around the text. A separator hides its contents from screen readers, so the text also becomes its `aria-label` (pass your own `aria-label` to override). With `interactive` the role is dropped: a separator must not contain a control, and the button keeps its own name and colour.

## Tokens

| Token | Used for |
| --- | --- |
| `--border-neutral` / `--border-neutral-faded` | Line colour per `color` |
| `--foreground-neutral-faded` | Label text |

## Do / Don’t

Layout primitive — exempt from Do/Don’t guidance (no misuse surface).

## Content

Layout primitive — exempt from content guidance (no text of its own).

## Related

[

StackLays children out in a column or row with a consistent gap — the default way to space a group of elements.

](https://apogee.avaui.dev/docs/stack)[

BoxThe layout primitive. Direction, gap, padding, surface, border, radius and shadow as token props.

](https://apogee.avaui.dev/docs/box)[

SectionHeaderEyebrow, heading and description at the top of a section or an app page, with actions, a divider and the level, alignment and colours every section shares.

](https://apogee.avaui.dev/docs/section-header)