Layout

Divider

A rule. Renders a real <hr> in React, so it is a landmark for assistive tech rather than a decorative div.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Above

Below

Left

Right

Above

Below

Left

Right

Above

Below

Left

Right

Above

Below

Left

Right

Above

Below

Left

Right

Code

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-4);width:100%;">
  <p class="aura-text aura-text--body" style="">Above</p>
  <hr class="aura-divider">
  <p class="aura-text aura-text--body" style="">Below</p>
  <div class="aura-divider aura-divider--labelled" role="separator" aria-orientation="horizontal" aria-label="or"><span class="aura-divider__label" aria-hidden="true">or</span></div>
  <div class="aura-group" style="--aura-gap:var(--space-3);--aura-align:center;height:32px;">
    <p class="aura-text aura-text--body" style="">Left</p>
    <hr class="aura-divider aura-divider--vertical">
    <p class="aura-text aura-text--body" style="">Right</p>
  </div>
</div>

Demo.tsx

import { Group, Divider, Stack, Typography } from '@ilomee/aura-react';

export default function Demo() {
  return (
    <Stack gap={4} style={{ width: '100%' }}>
      <Typography variant="body">Above</Typography>
      <Divider />
      <Typography variant="body">Below</Typography>
      <Divider label="or" />

      <Group align="center" style={{ height: 32 }}>
        <Typography variant="body">Left</Typography>
        <Divider orientation="vertical" />
        <Typography variant="body">Right</Typography>
      </Group>
    </Stack>
  );
}

Demo.vue

<script setup lang="ts">
import { Divider } from '@ilomee/aura-vue';
</script>

<template>
  <Divider />
  <Divider label="or" />
  <Divider orientation="vertical" />
</template>

Demo.svelte

<script lang="ts">
  import { Divider } from '@ilomee/aura-svelte';
</script>

<Divider />
<Divider label="or" />
<Divider orientation="vertical" />

Used as [auraDivider] — a directive you put on your own element.

demo.component.ts

import { AuraDivider } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraDivider],
  template: `<hr auraDivider />`,
})
export class DemoComponent {}

Differences from the React reference

No label. The other three are components and can swap the element they render — <hr> is void, so a labelled rule has to become a <div role="separator"> with a span inside. This one is a *directive* on an element you already wrote, so it can add classes and attributes and cannot add a child. The markup is three lines and produces the same DOM: <div auraDivider class="aura-divider--labelled" role="separator" aria-label="or"><span class="aura-divider__label" aria-hidden="true">or</span></div>. Making this a component would fix it and would also break every <hr auraDivider> already written.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`
label	`string`	—	Words in the middle of the rule — "or", "Personal", "Older". With one the element changes: `<hr>` is void, so there is nowhere to put the words, and the labelled form is a `<div role="separator">` — the role `<hr>` already had implicitly. `aria-label` carries the words and the span is hidden from the tree, because `separator` does not take its name from its contents. Ignored when `orientation` is `vertical`.

Name	Type	Default	Notes
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`
label	`string`	—	Words in the middle of the rule — "or", "Personal", "Older". With one the element changes: `<hr>` is void, so there is nowhere to put the words, and the labelled form is a `<div role="separator">` — the role `<hr>` already had implicitly. `aria-label` carries the words and the span is hidden from the tree, because `separator` does not take its name from its contents. Ignored when `orientation` is `vertical`.

Name	Type	Default	Notes
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`
label	`string`	—	Words in the middle of the rule — "or", "Personal", "Older". With one the element changes: `<hr>` is void, so there is nowhere to put the words, and the labelled form is a `<div role="separator">` — the role `<hr>` already had implicitly. `aria-label` carries the words and the span is hidden from the tree, because `separator` does not take its name from its contents. Ignored when `orientation` is `vertical`.

Name	Type	Default	Notes
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-divider	base	Required. A modifier does nothing without it.
.aura-divider--vertical	modifier
.aura-divider--labelled	modifier
.aura-divider__label	element

Tokens and rules

components.css

line: 1px solid var(--border)
vertical: border-inline-start · align-self: stretch
labelled: flex · ::before/::after lines · gap var(--space-3)
label: 600 12px var(--font) · var(--text-faint)