Divider

Dividers are thin lines that group content in lists or other containers.

Usage

Divider renders a thin line that separates content in lists or other containers. Import Divider from @udixio/ui-react or @udixio/ui-angular.

Orientation

Use orientation to switch between a full-width horizontal line (default) and a vertical line that stretches to fill its container’s height.

Section A

Section B

Section C

import { Divider } from '@udixio/ui-react';

export default function DividerOrientationReact() {
  return (
    <div className="flex items-center gap-4">
      <div>
        <p>Section A</p>
        <Divider />
        <p>Section B</p>
      </div>
      <Divider orientation="vertical" className="h-12" />
      <div>
        <p>Section C</p>
      </div>
    </div>
  );
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Divider } from '@udixio/ui-angular';

@Component({
  selector: 'docs-divider-orientation-angular',
  standalone: true,
  imports: [Divider],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex items-center gap-4">
      <div>
        <p>Section A</p>
        <udx-divider />
        <p>Section B</p>
      </div>
      <udx-divider orientation="vertical" class="h-12" />
      <div>
        <p>Section C</p>
      </div>
    </div>
  `,
})
export class DividerOrientationAngular {}

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

<div class="flex items-center gap-4">
  <div>
    <p>Section A</p>
    <Divider />
    <p>Section B</p>
  </div>
  <Divider orientation="vertical" class="h-12" />
  <div>
    <p>Section C</p>
  </div>
</div>

Spacing and sizing

Divider has no built-in margin or length; control spacing and size with your own utility classes – className in React, classes in Angular, where className is a React DOM property name rather than a shared concept.

Tight spacing

Wide spacing

Left

Right

import { Divider } from '@udixio/ui-react';

export default function DividerSpacingReact() {
  return (
    <div className="space-y-6">
      <div>
        <p className="mb-2">Tight spacing</p>
        <Divider className="my-1" />
      </div>
      <div>
        <p className="mb-2">Wide spacing</p>
        <Divider className="my-6" />
      </div>
      <div className="flex items-center gap-4">
        <span>Left</span>
        <Divider orientation="vertical" className="h-8" />
        <span>Right</span>
      </div>
    </div>
  );
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Divider } from '@udixio/ui-angular';

@Component({
  selector: 'docs-divider-spacing-angular',
  standalone: true,
  imports: [Divider],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="space-y-6">
      <div>
        <p class="mb-2">Tight spacing</p>
        <udx-divider class="my-1" />
      </div>
      <div>
        <p class="mb-2">Wide spacing</p>
        <udx-divider class="my-6" />
      </div>
      <div class="flex items-center gap-4">
        <span>Left</span>
        <udx-divider orientation="vertical" class="h-8" />
        <span>Right</span>
      </div>
    </div>
  `,
})
export class DividerSpacingAngular {}

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

<div class="space-y-6">
  <div>
    <p class="mb-2">Tight spacing</p>
    <Divider class="my-1" />
  </div>
  <div>
    <p class="mb-2">Wide spacing</p>
    <Divider class="my-6" />
  </div>
  <div class="flex items-center gap-4">
    <span>Left</span>
    <Divider orientation="vertical" class="h-8" />
    <span>Right</span>
  </div>
</div>

Accessibility

Divider renders a native <hr>, which carries the implicit separator role without any extra ARIA. Because the default aria-orientation for that role is horizontal, the component sets aria-orientation="vertical" whenever orientation="vertical", so assistive technology matches the visible layout.

Divider is purely decorative in this component set: there is no decorative/aria-hidden escape hatch, so every instance is announced as a separator to assistive technology.