<Divider />

<Divider />TailwindCSS ModulesProduction Stable

High-performance structural separator primitive engineered for multi-tier visual rhythm, strict DOM accessibility, and flexible label slotting. Renders semantic native rules or decorative boundaries with microsecond overhead.

InstallationColoxo CLI
npx coloxo add divider --style coloxo-css
ES Module ImportPlayground / npm package
import { Divider } from '@coloxo/ui';
Package: @coloxo/uiBundle: 0.62 KB

Design Tokens:

--cx-divider-color--cx-divider-width--cx-divider-spacing--cx-divider-label-gap

01 / Visual architecture

1. Orientation & Axis Geometry

Horizontal and vertical planar partitioning conforming to rigid 1px hairline rendering.

orientation="horizontal"DEFAULT
Full-width or parent-constrained partition with zero subpixel rounding jitter.

100% width

Below the rule

<Divider orientation="horizontal" spacing="default" />
orientation="vertical"
Inline 1×20px hairline (auto / flex-centered) for utility bars, breadcrumbs, and segmented controls.

Telemetry

Nodes (42)

Filters

auto / flex stretch · 20px hairline

<Divider orientation="vertical" />

Standard Spacing Cadences

Managed via the strict 8pt vertical rhythm system.

spacing="compact"
8px
High-density tables, modal action rows, and nested dropdown menus.

Above

Below

spacing="default"DEFAULT
16px / 24px
Primary cadence for cards, drawer partitions, and enterprise forms.

Above

Below

spacing="relaxed"
32px
Section separation across dashboards and long-scroll documentation.

Above

Below

02 / DOM architecture

2. Semantic vs Decorative A11Y Contract

Engineered screen-reader parity guaranteeing clean acoustic accessibility.

decorative={true}DEFAULT
Purely visual partitions. Suppresses accessibility tree registration.
Clean presentation

Screen readers read cleanly past the element without announcing boundaries.

<div role="none" aria-hidden="true" class="cx-divider" />
decorative={false}
Thematic paragraph break or significant logical grouping. Announced to non-visual users.
Native / WAI-ARIA

Screen reader vocalizes a separator / thematic break.

<hr class="cx-divider" /> → “Separator / Thematic Break”

03 / Inline label architecture

3. Inline Label Architecture

Symmetrical micro-flex layout with centered badge, chip, or typographic label. Label is restricted to orientation="horizontal" via discriminated union types.

Standard String Token

label="OR"

Descriptive Flow Partition

Iconography & Badge Slot

label={<Badge />}

TypeScript compile-time safety: DividerProps = HorizontalDividerProps | VerticalDividerProps. Configuring a label on vertical orientation is a type error.

04 / Sandbox workspace

4. Interactive Live Playground

Real-time dynamic prop testing harness and code generation engine.

Props inspector

string | ReactNode

Visual Render CanvasHORIZONTAL · DEFAULT
tsx
<Divider  label="OR"/>

05 / Theme system

5. Enterprise Dark Theme Matrix

Validated contrast metrics on deep enterprise background token scales.

Night Canvas Simulation · #0B1120 Palette Match
WCAG AAA Compliant (14.2:1 Stroke-to-Text Contrast)
Toolbar separator

Cluster-09

ACTIVE

color: outline-variant @ ~30% alpha

Dark inset label partition

AA Large / AAA Graphical label contrast

06 / Application patterns

6. Application Compositions

Real-world enterprise assembly archetypes in operational layouts.

Composition A: SSO Gateway

Auth Template

Multi-provider SSO partitioning external OpenID federations from internal directory authentication.

Composition B: Data Grid Filter Toolbar

Data Workspace

Dense operational toolbar hosting date range selectors, search input, vertical divider bounds, and export triggers.

Transactions

1,492,028

Avg Latency

14.2 ms

07 / Compliance & standards

7. A11Y & Screen Reader Contract

Conforming strictly to W3C ARIA Authoring Practices Guide (APG).

Role="separator" vs Presentation

When decorative={false}, elements utilize an explicit role="separator" paired with aria-orientation to alert non-visual users of content boundaries.

Zero Layout Shift (CLS 0.00)

All hairline borders leverage explicit 1px CSS geometry rather than outline rings, guaranteeing exact 0.00 cumulative layout shift during progressive SSR hydration.

High Contrast Mode (WHCM)

Includes @media (forced-colors: active) mappings to Windows system colors CanvasText / ButtonBorder, preventing separators from disappearing.

Props

NameTypeDefaultDescription
orientation"horizontal" | "vertical"horizontalAxis. Labels are only allowed on horizontal.
spacing"compact" | "default" | "relaxed"defaultMargin rhythm (8px / 16px / 32px).
decorativebooleantrueWhen true, presentational only; when false, announced thematic break.
labelReactNode—Centered label/badge slot (horizontal only; TypeScript-enforced).
insetboolean—Inset the stroke from container edges.
subtleboolean—Lower-contrast stroke for secondary partitions.
stretchboolean—Vertical only: stretch to flex cross-axis instead of the default 20px hairline.