PixelDivider

Horizontal rule with optional centered label; pixel surface adds dotted line and diamond ornaments.

  • Optional centered label between two rules
  • Tone-aware label color via shared toneMap
  • Symmetric vertical spacing presets (none/sm/md/lg)
  • Pixel surface variant with dotted rule and ◆ ornaments
  • Surface-aware: falls back to nearest <PxlKitSurface>
Status
stable
Category
layout
Since
v1.6.0

API

import { PixelDivider } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
labelstring—Optional centered label between two rules.
tone'green' | 'cyan' | 'gold' | 'red' | 'purple' | 'pink' | 'neutral''neutral'Color tone of the label text.
spacing'none' | 'sm' | 'md' | 'lg''none'Symmetric vertical padding.
classNamestring—Extra classes on the root element.
surface'pixel' | 'linear'—Surface variant. Falls back to nearest <PxlKitSurface>.

Accessibility

WCAG target: 2.1 AA

  • role=separator with aria-orientation=horizontal when labeled; decorative <hr> otherwise

Non-interactive. When a label is present, the wrapper exposes role="separator" and aria-label; the underlying rules are aria-hidden.

Usage

import { PixelDivider } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelDivider />;
}

Examples

Default

import { PixelDivider } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelDivider />;
}

With Label

import { PixelDivider } from '@pxlkit/ui-kit';

export function WithLabel() {
  return <PixelDivider label="Section" />;
}

Tones

import { PixelDivider } from '@pxlkit/ui-kit';

export function Tones() {
  return (
    <div className="flex flex-col gap-4">
      <PixelDivider label="Neutral" tone="neutral" />
      <PixelDivider label="Green" tone="green" />
      <PixelDivider label="Cyan" tone="cyan" />
      <PixelDivider label="Gold" tone="gold" />
      <PixelDivider label="Red" tone="red" />
      <PixelDivider label="Purple" tone="purple" />
      <PixelDivider label="Pink" tone="pink" />
    </div>
  );
}

Spacings

import { PixelDivider } from '@pxlkit/ui-kit';

export function Spacings() {
  return (
    <div>
      <PixelDivider label="None" spacing="none" />
      <PixelDivider label="Small" spacing="sm" />
      <PixelDivider label="Medium" spacing="md" />
      <PixelDivider label="Large" spacing="lg" />
    </div>
  );
}

Surfaces

import { PixelDivider } from '@pxlkit/ui-kit';

export function Surfaces() {
  return (
    <div className="flex flex-col gap-6">
      <PixelDivider label="Pixel surface" surface="pixel" />
      <PixelDivider label="Linear surface" surface="linear" />
    </div>
  );
}

Plain Rule

import { PixelDivider } from '@pxlkit/ui-kit';

export function PlainRule() {
  return (
    <div className="flex flex-col gap-6">
      <PixelDivider surface="pixel" />
      <PixelDivider surface="linear" />
    </div>
  );
}