Divider

A divider component that creates a visual separator between content sections.

Installation

npx @zizigy/capsule add Divider

Usage

Horizontal (default)

<capsule-divider></capsule-divider>

Vertical

LeftRight

<capsule-divider orientation="vertical"></capsule-divider>

Thickness

<capsule-divider thickness="thin"></capsule-divider>
<capsule-divider thickness="thick"></capsule-divider>

Colors

<capsule-divider color="primary"></capsule-divider>
<capsule-divider color="error"></capsule-divider>
<capsule-divider color="success"></capsule-divider>

Variants

<capsule-divider variant="ghost"></capsule-divider>

Attributes

Attribute	Type	Default	Description
orientation	string	horizontal	Divider direction (horizontal or vertical)
thickness	string	-	Line thickness (thin or thick)
color	string	-	Color variant (primary, error, warning, etc.)
variant	string	-	Visual style variant (ghost)

Orientation Values

• horizontal — Horizontal divider (default)
• vertical — Vertical divider

Thickness Values

• thin — Thinner divider (0.5px)
• thick — Thicker divider (2px)

Color Values

• primary — Primary brand color
• error — Error/danger color
• warning — Warning color
• success — Success color
• info — Information color

Variant Values

• ghost — Semi-transparent ghost divider

Accessibility

• ✅ ARIA role="separator" set automatically
• ✅ aria-orientation matches orientation attribute
• ✅ Semantic divider for screen readers