Divider

A divider visually separates content sections or components within a layout, providing structure and enhancing readability by creating distinct visual breaks.

Overview

catnip-divider renders a native <hr> and styles it with a single visible border edge (horizontal: border-top; vertical: border-left).

Look and layout

• Orientation — Horizontal by default (vertical="false"). With vertical="true", the rule runs vertically; the parent should give it a defined height (for example flex or grid).
• Variant — Maps to border-style on that edge: solid, dashed, dotted, double.
• Size — Stroke thickness: s → 1px, m → 2px, l → 4px.
• Shape — round (default): pill-style caps via border-radius. square: square corners.

Color

The line uses currentColor on the host, so it follows the color you set on catnip-divider (or inherited from ancestors). The host defaults to var(--color-stroke-small-item). There is no color prop — keep tokens and theming in CSS.

Behaviour for assistive technology (decorative, aria-label, roles) is covered under Accessibility; prop reference is on the Specs tab.

Live example

Accessibility

• Default (decorative="true): aria-hidden="true" — purely visual; no separator role.
• Semantic (decorative="false): role="separator", aria-orientation, and optional aria-label via aria-label when the separation should be named.