Divider

A separator between content, horizontal or vertical.

Last updated

Section one

Section two

Show code
<p>Section one</p>
<Divider />
<p>Section two</p>

Add

npx @ava-ui/apogee add divider

No Apogee dependencies.

Usage

---
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:

Show code
<Divider orientation="horizontal" />
LeftRight
Show code
<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.

Show code
<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):

Show code
<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:

Show code
<Divider variant="dual" interactive>
<ButtonGroup>…</ButtonGroup>
</Divider>

States

No interactive states — a static separator.

Examples

Between toolbar items:

<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.
BoxThe layout primitive. Direction, gap, padding, surface, border, radius and shadow as token props.
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.